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 相关文章推荐
JAVASCRIPT IE 与 FF中兼容问题小结
Feb 18 Javascript
javascript工厂方式定义对象
Dec 26 Javascript
jQuery中设置form表单中action值的实现方法
May 25 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 Javascript
关于AngularJs数据的本地存储详解
Jan 20 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
Vue实现table上下移动功能示例
Feb 21 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 Javascript
vue 如何使用递归组件
Oct 23 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+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
JavaScript 事件参考手册
2008/12/24 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
2015/03/31 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
微信小程序实现发红包功能
2018/07/11 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
python 从远程服务器下载东西的代码
2013/02/10 Python
简单上手Python中装饰器的使用
2015/07/12 Python
python比较两个列表是否相等的方法
2015/07/28 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
python 实现多维数组(array)排序
2020/02/28 Python
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
学院书画协会部门职责
2013/11/28 职场文书
广播节目策划方案
2014/05/23 职场文书
羽毛球社团活动总结
2014/06/27 职场文书
绵山导游词
2015/02/05 职场文书
如何用python绘制雷达图
2021/04/24 Python
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript