zoukankan      html  css  js  c++  java
  • Js-动态控制table的tr、td增加及删除的具体实现

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

    增加:

    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; 
    } 
    } 
  • 相关阅读:
    Eclipse汉化教程
    php课程---文件操作及文件上传的代码总结
    php课程---Json格式规范需要注意的小细节
    php课程---php使用PDO方法详解(转)
    php课程---随机数
    php课程---Ajax(老师详解)
    php课程---JavaScript与Jquery的区别
    php课程---JavaScript与Jquery的区别(转)
    php课程---初学PDO
    php课程---练习(联系人信息表)
  • 原文地址:https://www.cnblogs.com/hwaggLee/p/4598443.html
Copyright © 2011-2022 走看看