js动态控制table的tr、td增加及删除的具体实现_Javascript教程-查字典教程网
js动态控制table的tr、td增加及删除的具体实现
js动态控制table的tr、td增加及删除的具体实现
发布时间:2016-12-30 来源:查字典编辑
摘要:html:复制代码代码如下:序号机器名IP地址MAC地址上行/下行速率js:增加:复制代码代码如下:if(条件){//根据Interface...

html:

复制代码 代码如下:

<table id='wifi_clients_table'>

<thead>

<tr>

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

}

}

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类