Js dynamic control table tr td add and delete the concrete implementation
- 2020-03-30 02:47:00
- OfStack
HTML:
Js:
Add:
Delete: cleared when the page is closed, and then regenerated on the next visit, to prevent every tr increment, page disorder
<table id='wifi_clients_table' style="color:#0099CC;font-size:12px;" class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr class="success">
<th> The serial number </th>
<th> The name of the machine </th>
<th>IP address </th>
<th>MAC address </th>
<th> The upside / Descending rate </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Js:
Add:
if( conditions )
{//Distinguish between wireless and finite clients based on the value of the InterfaceType
var table = document.getElementById("wifi_clients_table");
var newRow = table.insertRow(); //Create a new line
var newCell1 = newRow.insertCell(0); //Create a new cell
newCell1.innerHTML = "<td>1</td>" ; //The contents of the cell
newCell1.setAttribute("align","center"); //Set the location
var newCell2 = newRow.insertCell(1); //Create a new cell
newCell2.innerHTML = "<td>"+info.LANHosts.HostName+"</td>";
newCell2.setAttribute("align","center"); //Set the location
var newCell3 = newRow.insertCell(2); //Create a new cell
newCell3.innerHTML = "<td>"+info.LANHosts.IPAddress+"</td>";
newCell3.setAttribute("align","center"); //Set the location
var newCell4 = newRow.insertCell(3); //Create a new cell
newCell4.innerHTML = "<td>"+info.LANHosts.MACAddress+"</td>";
newCell4.setAttribute("align","center"); //Set the location
var newCell5 = newRow.insertCell(4); //Create a new cell
newCell5.innerHTML = "<td>"+info.LANHosts.UpRate+"/"+info.LANHosts.DownRate+"kb</td>";
newCell5.setAttribute("align","center"); //Set the location
}
Delete: cleared when the page is closed, and then regenerated on the next visit, to prevent every tr increment, page disorder
var t1=document.getElementById("lan_clients_table");
var rowNum=t1.rows.length;
if(rowNum>0)
{
for(i=0;i<rowNum;i++)
{
t1.deleteRow(i);
rowNum=rowNum-1;
i=i-1;
}
}