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 相关文章推荐
清空上传控件input file的值
Jul 03 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
Jquery插件之打造自定义的select标签
Nov 30 Javascript
javascript 动态创建表格的2种方法总结
Mar 04 Javascript
3种js实现string的substring方法
Nov 09 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
Oct 30 Javascript
js微信支付实现代码
Dec 22 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
15分钟学会vue项目改造成SSR(小白教程)
Dec 17 Javascript
ES6箭头函数和扩展实例分析
May 23 Javascript
vue实现同时设置多个倒计时
May 20 Vue.js
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
smarty的保留变量问题
2008/10/23 PHP
浅谈PHP安全防护之Web攻击
2017/01/03 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
怎么清空javascript数组
2013/05/11 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
web打印小结
2017/01/11 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
详解Python字符串对象的实现
2015/12/24 Python
python中map()与zip()操作方法
2016/02/27 Python
python中的二维列表实例详解
2018/06/19 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
keras实现VGG16 CIFAR10数据集方式
2020/07/07 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
python实现自动清理重复文件
2020/08/24 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
IBatis持久层技术
2016/07/18 面试题
计算机专业应届毕业生自荐信
2013/09/26 职场文书
珠宝店促销方案
2014/03/21 职场文书
《赠汪伦》教学反思
2014/04/12 职场文书
小学生安全教育广播稿
2014/10/20 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
python requests模块的使用示例
2021/04/07 Python
python自然语言处理之字典树知识总结
2021/04/25 Python