JavaScript动态操作HTML表格：实现TR与TD的增删逻辑

HTML表格基础结构定义

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>序号</th>
<th>机器名</th>
<th>IP地址</th>
<th>MAC地址</th>
<th>上行/下行速率</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

JavaScript动态增加行与单元格

JavaScript实现部分：

增加行操作：

 
if(条件)
{//根据InterfaceType的值区分无线客户端和有限客户端
var table = document.getElementById("wifi_clients_table");
var newRow = table.insertRow(); //创建新行
var newCell1 = newRow.insertCell(0); //创建新单元格
newCell1.innerHTML = "<td>1</td>" ; //单元格内的内容
newCell1.setAttribute("align","center"); //设置位置
var newCell2 = newRow.insertCell(1); //创建新单元格
newCell2.innerHTML = "<td>"+info.LANHosts.HostName+"</td>";
newCell2.setAttribute("align","center"); //设置位置
var newCell3 = newRow.insertCell(2); //创建新单元格
newCell3.innerHTML = "<td>"+info.LANHosts.IPAddress+"</td>";
newCell3.setAttribute("align","center"); //设置位置
var newCell4 = newRow.insertCell(3); //创建新单元格
newCell4.innerHTML = "<td>"+info.LANHosts.MACAddress+"</td>";
newCell4.setAttribute("align","center"); //设置位置
var newCell5 = newRow.insertCell(4); //创建新单元格
newCell5.innerHTML = "<td>"+info.LANHosts.UpRate+"/"+info.LANHosts.DownRate+"kb</td>";
newCell5.setAttribute("align","center"); //设置位置
} 

页面关闭时的表格行清除逻辑

删除操作：在页面关闭时执行清除，下次访问时重新生成，以防止每次增加行导致行号无限递增，避免页面显示错乱。

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