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 相关文章推荐
二级域名转向类
Nov 09 Javascript
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
Mar 27 Javascript
数组方法解决JS字符串连接性能问题有争议
Jan 12 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
Dec 12 Javascript
JavaScript事件委托的技术原理探讨示例
Apr 17 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
JS实现的自动打字效果示例
Mar 10 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
Vue.js2.0中的变化小结
Oct 24 Javascript
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 Javascript
js闭包和垃圾回收机制示例详解
Mar 01 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设计模式 Adapter(适配器模式)
2011/06/26 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
javascript 拖动表格行实现代码
2011/05/05 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
Express系列之multer上传的使用
2017/10/27 Javascript
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
Python多线程编程简单介绍
2015/04/13 Python
Python素数检测实例分析
2015/06/15 Python
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
TensorFlow如何实现反向传播
2018/02/06 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
在Mac中PyCharm配置python Anaconda环境过程图解
2020/03/11 Python
Python几种常见算法汇总
2020/06/02 Python
python编写softmax函数、交叉熵函数实例
2020/06/11 Python
聚网科技C++面试笔试题
2015/09/01 面试题
生产部岗位职责范文
2014/02/07 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
2014年民政工作总结
2014/11/26 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
Python与C++中梯度方向直方图的实现
2022/03/17 Python