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 贪吃蛇实现代码
Nov 22 Javascript
js切换div css注意的细节
Dec 10 Javascript
无缝滚动js代码通俗易懂(自写)
Jun 19 Javascript
javascript:文字不间断向左移动的实例代码
Aug 08 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
实用框架(iframe)操作代码
Oct 23 Javascript
深入探寻seajs的模块化与加载方式
Apr 14 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
浅析jQuery 3.0中的Data
Jun 14 Javascript
微信小程序wx:for循环的实例详解
Oct 07 Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 Javascript
JS call()及apply()方法使用实例汇总
Jul 11 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 空格,换行,跳格使用说明
2009/12/18 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
用javascript做拖动布局的思路
2008/05/31 Javascript
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
2012/01/15 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
Vuex简单入门
2017/04/19 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
简单快速的实现js计算器功能
2017/08/17 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
通过js实现压缩图片上传功能
2020/02/25 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
Python中logging模块的用法实例
2014/09/29 Python
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
python实现简易数码时钟
2021/02/19 Python
python的继承知识点总结
2018/12/10 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
python如何实现异步调用函数执行
2019/07/08 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
英国DIY和家居装饰领域的主要品牌:Wickes
2019/11/26 全球购物
外语系毕业生求职自荐信
2014/04/12 职场文书
英语故事演讲稿
2014/04/29 职场文书
python process模块的使用简介
2021/05/14 Python
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python