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是否可以跨文件同时控制多个iframe页面的应用技巧
Dec 16 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
简述Matlab中size()函数的用法
Mar 20 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
jQuery删除当前节点元素
Dec 07 Javascript
js实现自定义进度条效果
Mar 15 Javascript
vue中render函数的使用详解
Oct 12 Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 Javascript
详解js常用分割取字符串的方法
May 15 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
Mar 01 Javascript
原生Javascript+HTML5一步步实现拖拽排序
Jun 12 Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 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中autoload的用法总结
2013/11/08 PHP
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
php ImageMagick windows下安装教程
2015/01/26 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
用Jquery实现滚动新闻
2014/02/12 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
JS实现根据用户输入分钟进行倒计时功能
2016/11/14 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
js中Function引用类型常见有用的方法和属性详解
2019/12/11 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
Vue实现购物车基本功能
2020/11/08 Javascript
Python实例之wxpython中Frame使用方法
2014/06/09 Python
python 中if else 语句的作用及示例代码
2018/03/05 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
对python周期性定时器的示例详解
2019/02/19 Python
python print出共轭复数的方法详解
2019/06/25 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
CSS3近阶段篇之酷炫的3D旋转透视
2016/04/28 HTML / CSS
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
业务员薪酬管理制度
2014/01/15 职场文书
小学语文课后反思精选
2014/04/25 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
市场部经理岗位职责
2015/02/02 职场文书
公司员工奖惩制度
2015/08/04 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
2015年小学体育教师工作总结
2015/10/23 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
15个值得收藏的JavaScript函数
2021/09/15 Javascript