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 loading效果代码
Jun 18 Javascript
jquery中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
Javascript的各种节点操作实例演示代码
Jun 27 Javascript
javascript错误的认识不用关心内存管理
Dec 15 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
Oct 20 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
Oct 31 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
JS数组去重常用方法实例小结【4种方法】
May 28 Javascript
vue-cli系列之vue-cli-service整体架构浅析
Jan 14 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 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
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
php实现的简易扫雷游戏实例
2015/07/09 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
yii2.0数据库迁移教程【多个数据库同时同步数据】
2016/10/08 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
2016/10/25 Javascript
Bootstrap栅格系统学习笔记
2016/11/25 Javascript
axios学习教程全攻略
2017/03/26 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
2018/09/15 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
python 换位密码算法的实例详解
2017/07/19 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
python将文本分每两行一组并保存到文件
2018/03/19 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
numpy.where() 用法详解
2019/05/27 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
H5离线存储Manifest原理及使用
2020/04/28 HTML / CSS
Gap工厂店:Gap Factory
2017/11/02 全球购物
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
会计专业大学生职业生涯规划书
2014/02/11 职场文书
保险专业自荐信范文
2014/02/20 职场文书
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
Python Matplotlib库实现画局部图
2021/11/17 Python