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 RadioButtonList获取选中值
Apr 09 Javascript
小结Node.js中非阻塞IO和事件循环
Sep 18 Javascript
基于ajax实现文件上传并显示进度条
Aug 03 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
Node.js connect ECONNREFUSED错误解决办法
Sep 15 Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
详解webpack + react + react-router 如何实现懒加载
Nov 20 Javascript
微信小程序解析富文本过程详解
Jul 13 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
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生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
php发送与接收流文件的方法
2015/02/11 PHP
网上应用的一个不错common.js脚本
2007/08/08 Javascript
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
Prototype Date对象 学习
2009/07/12 Javascript
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
layui table设置前台过滤转义等方法
2018/08/17 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
python对url格式解析的方法
2015/05/13 Python
在Python中用split()方法分割字符串的使用介绍
2015/05/20 Python
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
Python包和模块的分发详细介绍
2020/06/19 Python
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
2013/01/31 HTML / CSS
如何判断计算机可能已经中马
2013/03/22 面试题
班主任工作年限证明
2014/01/12 职场文书
精神病医院见习报告
2014/11/03 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
禁毒心得体会范文
2016/01/15 职场文书
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记
Python Flask实现进度条
2022/05/11 Python