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 相关文章推荐
js中return false(阻止)的用法
Aug 14 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 Javascript
javaScript如何生成xmlhttp
Dec 16 Javascript
js实现鼠标滑过文字链接色彩变化的效果
May 06 Javascript
深入浅出分析javaScript中this用法
May 09 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
vue之浏览器存储方法封装实例
Mar 15 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 Javascript
了解Javascript中函数作为对象的魅力
Jun 19 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 Javascript
原生js实现五子棋游戏
May 28 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
虫族 Zerg 热键控制
2020/03/14 星际争霸
表单复选框向PHP传输数据的代码
2007/11/13 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
JavaScript的eval JSON object问题
2009/11/15 Javascript
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
js文件缓存之版本管理详解
2013/07/05 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
2017/10/13 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
python中from module import * 的一个坑
2014/07/20 Python
Python字符串切片操作知识详解
2016/03/28 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
python生成大写32位uuid代码
2020/03/03 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
敬老院活动总结
2014/04/28 职场文书
本科生求职信
2014/06/17 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
新教师个人总结
2015/02/06 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python