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

 更新时间:2014年04月30日 11:20:27   作者:  
这篇文章主要介绍了使用js如何动态控制table的tr,td增加及删除,需要的朋友可以参考下
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;
}
}

相关文章

  • javascript 正则表达式去空行方法

    javascript 正则表达式去空行方法

    本文主要介绍了javascript 正则表达式去空行方法。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • javascript instanceof,typeof的区别

    javascript instanceof,typeof的区别

    区分string 与 String的区别
    2010-03-03
  • js数组实现权重概率分配

    js数组实现权重概率分配

    今天写了一个js控制页面轮播的功能,如果仅仅使用队列很简单,但是考虑到为每一个页面分配权重的是否变的异常复杂,使用switch和if else也无法解决,于是想到使用js数组实现
    2017-09-09
  • js中AppendChild与insertBefore的用法详细解析

    js中AppendChild与insertBefore的用法详细解析

    这篇文章主要是对js中AppendChild与insertBefore的用法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • Underscore源码分析

    Underscore源码分析

    Underscore 是一个 JavaScript 工具库,它提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象。这篇文章主要介绍了underscore源码分析相关知识,感兴趣的朋友一起学习吧
    2015-12-12
  • 手把手教你uniapp和uview2.0实现表单校验实战

    手把手教你uniapp和uview2.0实现表单校验实战

    表单提交对大家来说应该都不陌生,这是个很常见的功能,这篇文章主要给大家介绍了关于手把手教你uniapp和uview2.0实现表单校验的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • 深入分析javascript中的错误处理机制

    深入分析javascript中的错误处理机制

    这篇文章主要介绍了深入分析javascript中的错误处理机制的相关资料,需要的朋友可以参考下
    2016-07-07
  • JavaScript实现的圆形浮动标签云效果实例

    JavaScript实现的圆形浮动标签云效果实例

    这篇文章主要介绍了JavaScript实现的圆形浮动标签云效果,涉及javascript字符串与数组的遍历、排序操作以及元素样式动态操作与数学运算等相关技巧,是非常实用的一段代码,需要的朋友可以参考下
    2015-08-08
  • typescript 类型any不能分配给类型never

    typescript 类型any不能分配给类型never

    本文主要介绍了typescript 类型any不能分配给类型never,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置

    JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置

    这篇文章主要介绍了JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06

最新评论