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 相关文章推荐
niceTitle 基于jquery的超链接提示插件
May 31 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
Jun 07 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
Jan 10 Javascript
通过构造函数实例化对象的方法
Jun 28 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 Javascript
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
使用Ajax实现进度条的绘制
Apr 07 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
雄兵连:天使彦天使彦为爱折翼,彦和炙心同时念动的誓言!
2020/03/02 国漫
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
PHP树的代码,可以嵌套任意层
2006/10/09 PHP
使用NetBeans + Xdebug调试PHP程序的方法
2011/04/12 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
js中创建对象的几种方式示例介绍
2014/01/26 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
HTML5 canvas 9绘制图片实例详解
2016/09/06 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
JavaScript实现的DOM绘制柱状图效果示例
2018/08/08 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
Python中格式化format()方法详解
2017/04/01 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
Django使用中间键实现csrf认证详解
2019/07/22 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
python 等差数列末项计算方式
2020/05/03 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
python对execl 处理操作代码
2020/06/22 Python
Python实现数字的格式化输出
2020/08/01 Python
HTML5中FileReader接口使用方法实例详解
2017/08/26 HTML / CSS
HTML5图片预览实例分享
2014/06/04 HTML / CSS
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
C面试题
2015/10/08 面试题
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
管道维修工岗位职责
2013/12/27 职场文书
党员政治学习材料
2014/05/14 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
面试通知单大全
2015/04/20 职场文书
分家协议书范本
2016/03/22 职场文书