首页  >  文章  >  web前端  >  js动态控制table的tr、td增加及删除的具体实现_javascript技巧

js动态控制table的tr、td增加及删除的具体实现_javascript技巧

WBOY
WBOY原创
2016-05-16 16:50:391219浏览

html:

复制代码 代码如下:














序号 机器名 IP地址 MAC地址 上行/下行速率


js:

增加:
复制代码 代码如下:

if(条件)
{//根据InterfaceType的值区分无线客户端和有限客户端
var table = document.getElementById("wifi_clients_table");
var newRow = table.insertRow(); //创建新行

var newCell1 = newRow.insertCell(0); //创建新单元格
newCell1.innerHTML = "1" ; //单元格内的内容
newCell1.setAttribute("align","center"); //设置位置

var newCell2 = newRow.insertCell(1); //创建新单元格
newCell2.innerHTML = ""+info.LANHosts.HostName+"";
newCell2.setAttribute("align","center"); //设置位置

var newCell3 = newRow.insertCell(2); //创建新单元格
newCell3.innerHTML = ""+info.LANHosts.IPAddress+"";
newCell3.setAttribute("align","center"); //设置位置

var newCell4 = newRow.insertCell(3); //创建新单元格
newCell4.innerHTML = ""+info.LANHosts.MACAddress+"";
newCell4.setAttribute("align","center"); //设置位置

var newCell5 = newRow.insertCell(4); //创建新单元格
newCell5.innerHTML = ""+info.LANHosts.UpRate+"/"+info.LANHosts.DownRate+"kb";
newCell5.setAttribute("align","center"); //设置位置

}

删除:在页面关闭时清除,下次访问时再重新生成,防止每次tr递增,页面错乱
复制代码 代码如下:

var t1=document.getElementById("lan_clients_table");

var rowNum=t1.rows.length;
if(rowNum>0)
{
for(i=0;i{
t1.deleteRow(i);
rowNum=rowNum-1;
i=i-1;
}
}
声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn