手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js动态控制table的tr、td增加及删除的具体实现
js动态控制table的tr、td增加及删除的具体实现
摘要: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;

}

}

【js动态控制table的tr、td增加及删除的具体实现】相关文章:

JS动画效果打开、关闭层的实现方法

在JavaScript中处理时间之setMinutes()方法的使用

Javascript动态创建表格及删除行列的方法

JS或jQuery获取ASP.NET服务器控件ID的方法

javascript制作的滑动图片菜单

JQuery中DOM事件冒泡实例分析

js实现两点之间画线的方法

如何取得中文输入的真实长度?

javascript实现设置、获取和删除Cookie的方法

javascript改变和控制显示的图片大小

精品推荐
分类导航