js动态控制table的tr、td增加及删除的具体实现

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;
}
}

赞 (0)

相关推荐

  • JQuery动态给table添加、删除行 改进版

    复制代码 代码如下: <html> <head> <title> </title> <script src="js/jquery-1.4.2_min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> var row

  • js实现table添加行tr、删除行tr、清空行tr的简单实例

    如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author"

  • Js实现动态添加删除Table行示例

    Js实现动态添加删除Table行示例

    最近做项目遇到要动态添加.删除表格行的操作,实现如下 html代码 复制代码 代码如下: <table cellpadding="0" cellspacing="0" border="1" style="margin:auto; width:96%;" id="LearnInfoItem"> <tr > <td colspan="8" bgcolor=&qu

  • js动态给table添加/删除tr的方法

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author"

  • jquery 追加tr和删除tr示例代码

    复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script> $(function(){ $("#getAtr").click(function(){ $str=''; $str+="<tr align='center'>"; $str+="<td

  • JS实现从表格中动态删除指定行的方法

    本文实例讲述了JS实现从表格中动态删除指定行的方法.分享给大家供大家参考.具体如下: JS的表格对象有一个deleteRow方法用于删除表格中的指定行,只需要指定行号即可 <!DOCTYPE html> <html> <head> <script> function deleteRow(r) { var i=r.parentNode.parentNode.rowIndex; document.getElementById('myTable').deleteR

  • js动态控制table的tr、td增加及删除的具体实现

    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&

  • js将table的每个td的内容自动赋值给其title属性的方法

    如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>将table的每个td的内容自

  • js操作table中tr的顺序实现上移下移一行的效果

    总体思路是在table外部加个div,修改div的innerHtml实现改变tr顺序的效果 具体思路是 获取当前要移动tr行的rowIndex,在table中删除掉,然后循环table的rows,到了目标行再直接加进去,最后把整体的html赋值给div完成效果 js代码如下 //使行向上一行 function setRowUp(obj) { if (obj.parentNode.parentNode.rowIndex != 1) { var tab = obj.parentNode.parent

  • jQuery实现html table行Tr的复制、删除、计算功能

    本文实例讲述了jQuery实现html table行Tr的复制.删除.计算功能.分享给大家供大家参考,具体如下: 添加行: function addtr(){ var tr = $("#tb tr").eq(0).clone(); tr.appendTo("#tb"); //tr.insertBefore("#tb tr:last"); } <table id="tb"> <tr> </tr>

  • Js获取table当前tr行的值的代码

    下面的代码主要是学习控制表格里面的一些操作,代码都是直接写在表格里面的, 大家可以改成事件绑定的. Js获取 table当前行的值 var selectedTr=null; function c1(obj){ obj.style.backgroundColor='blue'; //把点到的那一行变希望的颜色; if(selectedTr!=null) selectedTr.style.removeAttribute("backgroundColor"); if(selectedTr==

  • JS动态添加Table的TR，TD实现方法

    本文实例讲述了JS动态添加Table的TR,TD实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html>  <head> <title></title> <SCRIPT language="JavaScript"> var tempRow=0; var maxRows=0; function insertRows(){ tempRow=table1.rows.length-1; maxRows=t

  • JS动态创建Table,Tr,Td并赋值的具体实现

    成果库修改:      要求主题列表随成果类型改变而改变      网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合--动态创建/编辑Table      概要代码如下:JS  复制代码 代码如下: //动态获取主题数据 function getzts(){     parentId = document.getElementById("bselect1").value;     if(parentId!=""){        

  • js修改table中Td的值(定义td的单击事件)

    项目做完,在测试验收时,用户突然提出,可以更改查询结果,便于打印.隐藏工程错误.但是这个时候提要求,比较头痛,后来,想了想还是用前台代码,这样,只要在项目的JS文件中,加入以下几个函数,便可以解决了. 复制代码 代码如下: /* 页面装载时,为每个td增加单击事件,这样,就可以不用对每个页面进行更改. */ function ReWritable() { var tbmian=document.getElementById("tbmain"); for(var i=0;i<tbm

  • JS选中checkbox后获取table内一行TD所有数据的方法

    本文实例讲述了JS选中checkbox后获取table内一行TD所有数据的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"

随机推荐