Rumah >hujung hadapan web >tutorial js >js动态控制table的tr、td增加及删除的具体实现_javascript技巧

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

WBOY
WBOYasal
2016-05-16 16:50:391272semak imbas

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;
}
}
Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn