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 相关文章推荐
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
有关JavaScript的10个怪癖和秘密分享
Aug 28 Javascript
js实现编辑div节点名称的方法
Dec 17 Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
React进阶学习之组件的解耦之道
Aug 07 Javascript
JS随机数产生代码分享
Feb 24 Javascript
微信小程序实现时间预约功能
Nov 27 Javascript
详解小程序设置缓存并且不覆盖原有数据
Apr 15 Javascript
详解React 条件渲染
Jul 08 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利用Socket获取网站的SSL证书与公钥
2017/06/18 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
JS分割字符串并放入数组的函数
2011/07/04 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
整理Python最基本的操作字典的方法
2015/04/24 Python
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
详解Python sys.argv使用方法
2019/05/10 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
创建Shapefile文件并写入数据的例子
2019/11/26 Python
关于python中plt.hist参数的使用详解
2019/11/28 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
新电JAVA笔试题目
2014/08/31 面试题
你所在的项目是如何确定版本号的
2015/12/28 面试题
妈妈的账单教学反思
2014/02/06 职场文书
行政部经理助理岗位职责
2014/06/15 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
2015年复活节活动总结
2015/02/27 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS
MySQL 数据表操作
2022/05/04 MySQL
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android