Js dynamic control table tr td add and delete the concrete implementation


HTML:


<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;
}
}