1. 程式人生 > >js動態控制table的tr,td增加及刪除

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