zoukankan      html  css  js  c++  java
  • js动态控制table的tr,td增加及删除

    html:

                <table id='wifi_clients_table'   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;
            }    
        }

  • 相关阅读:
    LeetCode每周记录-3
    leetcode每周记录
    leetcode每周记录
    软件工程课程总结报告
    微信抢票应用开发总结
    C#获取项目程序及运行路径的方
    python opencv 读取USB摄像头的像素问题
    去除激活水印办法
    系统激活成功仍显示水印,取消激活方法
    bytes,bytearray
  • 原文地址:https://www.cnblogs.com/qingsong/p/5031336.html
Copyright © 2011-2022 走看看