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 相关文章推荐
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
Node.js模块封装及使用方法
Mar 06 Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
JS实现图片切换特效
Dec 23 Javascript
浅析TypeScript 命名空间
Mar 19 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
Apr 15 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 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
DOMXML函数笔记
2006/10/09 PHP
人大复印资料处理程序_补充篇
2006/10/09 PHP
php中定时计划任务的实现原理
2013/01/08 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
如何实现JS函数的重载
2006/09/22 Javascript
javascript web页面刷新的方法收集
2009/07/02 Javascript
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
Python数组条件过滤filter函数使用示例
2014/07/22 Python
Python+django实现文件下载
2016/01/17 Python
浅谈python迭代器
2017/11/08 Python
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
浅谈Python3中print函数的换行
2020/08/05 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
英国著名书店:Foyles
2018/12/01 全球购物
十一个高级MySql面试题
2014/10/06 面试题
地方课程教学计划
2015/01/19 职场文书
开学第一周总结
2015/07/16 职场文书
生活小常识广播稿
2015/08/19 职场文书
学习党史心得体会2016
2016/01/23 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL