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 学习笔记 选择器之五
Jul 23 Javascript
toString()一个会自动调用的方法
Feb 08 Javascript
js DOM的学习笔记
Dec 22 Javascript
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
JavaScript将一个数组插入到另一个数组的方法
Mar 19 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
mac上配置Android环境变量的方法
Jul 08 Javascript
vue的token刷新处理的方法
Jul 17 Javascript
vue+Element实现搜索关键字高亮功能
May 28 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
js实现时钟定时器
Mar 26 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
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
PHP中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
10款实用的PHP开源工具
2015/10/23 PHP
jquery一般方法介绍 入门参考
2011/06/21 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
2013/06/14 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
2015/01/08 Javascript
js实现类似新浪微博首页内容渐显效果的方法
2015/04/10 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
前端jquery部分很精彩
2016/05/03 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
微信小程序单选框自定义赋值
2020/05/26 Javascript
在Django中创建动态视图的教程
2015/07/15 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
python脚本开机自启的实现方法
2019/06/28 Python
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2019/09/18 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
如何进行Linux分区优化
2013/02/12 面试题
PyQt QMainWindow的使用示例
2021/03/24 Python
家长对学生的评语
2014/04/18 职场文书
大三学习计划书范文
2014/05/02 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
欢迎词怎么写
2015/01/23 职场文书
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL