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


Posted in Javascript onApril 30, 2014

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 相关文章推荐
jQuery TextBox自动完成条
Jul 22 Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
JavaScript获取ul中li个数的方法
Feb 13 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
利用angular、react和vue实现相同的面试题组件
Feb 19 Javascript
详解javascript appendChild()的完整功能
Aug 18 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
react-router4按需加载(踩坑填坑)
Jan 06 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
Vue实现菜单切换功能
Nov 08 Javascript
JS如何使用剪贴板操作Clipboard API
May 17 Javascript
js控制href内容的连接内容的变化示例
Apr 30 #Javascript
js函数定时器实现定时读取系统实时连接数
Apr 30 #Javascript
struts2+jquery组合验证注册用户是否存在
Apr 30 #Javascript
jquery实现的网页自动播放声音
Apr 30 #Javascript
js验证IP及子网掩码的合法性有效性示例
Apr 30 #Javascript
JS图片自动轮换效果实现思路附截图
Apr 30 #Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 #Javascript
You might like
PHP 递归效率分析
2009/11/24 PHP
php动态生成函数示例
2014/03/21 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
javascript事件问题
2009/09/05 Javascript
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
node.js中的console用法总结
2014/12/15 Javascript
Jquery 实现table样式的设定
2015/01/28 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
Vue中添加滚动事件设置的方法详解
2020/09/14 Javascript
python基础教程之缩进介绍
2014/08/29 Python
浅析Python中yield关键词的作用与用法
2016/11/29 Python
Python 专题一 函数的基础知识
2017/03/16 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
如何利用Python写个坦克大战
2020/11/18 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
Etam俄罗斯:法国女士内衣和家居服网上商店
2019/10/30 全球购物
结构和类有什么异同
2012/07/16 面试题
领导班子四风对照检查材料范文
2014/09/27 职场文书
护士个人总结范文
2015/02/13 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
python如何进行基准测试
2021/04/26 Python
python中os.path.join()函数实例用法
2021/05/26 Python
手把手教你使用TensorFlow2实现RNN
2021/07/15 Python
Python使用DFA算法过滤内容敏感词
2022/04/22 Python