网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑:jimmy 日期: 2025/5/15 浏览:3 次 )
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>

js:

增加:
复制代码 代码如下:
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"); //设置位置

}

删除:在页面关闭时清除,下次访问时再重新生成,防止每次tr递增,页面错乱
复制代码 代码如下:
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;
}
}
上一篇:三种动态加载js的jquery实例代码另附去除js方法
下一篇:js控制href内容的连接内容的变化示例
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap