欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-04 22:27:24
...
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;
}
}