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

  • 2020-03-30 02:47:00
  • OfStack

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

Related articles: