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 相关文章推荐
学习ExtJS form布局
Oct 08 Javascript
百度留言本js 大家可以参考下
Oct 13 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
Dec 28 Javascript
JavaScript函数模式详解
Nov 07 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
使用watch在微信小程序中实现全局状态共享
Jun 03 Javascript
Vue实现导航栏菜单
Aug 19 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 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/06/20 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
jquery.validate分组验证代码
2011/03/17 Javascript
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
在 Angular 中实现搜索关键字高亮示例
2017/03/21 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
python实现C4.5决策树算法
2018/08/29 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
如何选择使用结构还是类
2014/05/30 面试题
函授本科毕业生自我鉴定
2013/10/16 职场文书
销售会计工作职责
2013/12/02 职场文书
新娘父亲婚礼致辞
2014/01/16 职场文书
大学生党员自我批评
2014/02/14 职场文书
本科毕业生求职自荐信
2014/04/09 职场文书
《东方明珠》教学反思
2014/04/20 职场文书
卫生系统先进事迹
2014/05/13 职场文书
考试诚信承诺书
2014/05/23 职场文书
求职信标题怎么写
2014/05/26 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
大学班长竞选稿
2015/11/20 职场文书