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 相关文章推荐
jquery解决图片路径不存在执行替换路径
Feb 06 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
Jun 05 Javascript
使用js完成节点的增删改复制等的操作
Jan 02 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
Javascript原型链及instanceof原理详解
May 25 Javascript
JS实现按比例缩小图片宽高
Aug 24 Javascript
解决Vue watch里调用方法的坑
Nov 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
PHP5中MVC结构学习
2006/10/09 PHP
PHP中,文件上传
2006/12/06 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
PHP变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
php文件上传的两种实现方法
2016/04/04 PHP
php使用filter_var函数判断邮箱,url,ip格式示例
2019/07/06 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
JS OOP包机制,类创建的方法定义
2009/11/02 Javascript
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
2012/03/14 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
js 颜色选择插件
2017/01/23 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
bootstrap table表格客户端分页实例
2017/08/07 Javascript
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
vue实现购物车的监听
2020/04/20 Javascript
python常用数据重复项处理方法
2019/11/22 Python
opencv3/C++ 平面对象识别&amp;透视变换方式
2019/12/11 Python
Python自动化操作实现图例绘制
2020/07/09 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
心理咨询承诺书
2014/05/20 职场文书
法人授权委托书范本
2014/09/17 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
培训讲师开场白
2015/06/01 职场文书
《纸船和风筝》教学反思
2016/02/18 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS