欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js動態(tài)控制table的tr、td增加及刪除的具體實現(xiàn)

 更新時間:2014年04月30日 11:20:27   作者:  
這篇文章主要介紹了使用js如何動態(tài)控制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(條件)
{//根據(jù)InterfaceType的值區(qū)分無線客戶端和有限客戶端
var table = document.getElementById("wifi_clients_table");
var newRow = table.insertRow(); //創(chuàng)建新行

var newCell1 = newRow.insertCell(0); //創(chuàng)建新單元格
newCell1.innerHTML = "<td>1</td>" ; //單元格內(nèi)的內(nèi)容
newCell1.setAttribute("align","center"); //設置位置

var newCell2 = newRow.insertCell(1); //創(chuàng)建新單元格
newCell2.innerHTML = "<td>"+info.LANHosts.HostName+"</td>";
newCell2.setAttribute("align","center"); //設置位置

var newCell3 = newRow.insertCell(2); //創(chuàng)建新單元格
newCell3.innerHTML = "<td>"+info.LANHosts.IPAddress+"</td>";
newCell3.setAttribute("align","center"); //設置位置

var newCell4 = newRow.insertCell(3); //創(chuàng)建新單元格
newCell4.innerHTML = "<td>"+info.LANHosts.MACAddress+"</td>";
newCell4.setAttribute("align","center"); //設置位置

var newCell5 = newRow.insertCell(4); //創(chuàng)建新單元格
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通如何過RGraph實現(xiàn)動態(tài)儀表盤

    JavaScript通如何過RGraph實現(xiàn)動態(tài)儀表盤

    這篇文章主要介紹了JavaScript通如何過RGraph實現(xiàn)動態(tài)儀表盤,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-10-10
  • javascript實現(xiàn)類似java中getClass()得到對象類名的方法

    javascript實現(xiàn)類似java中getClass()得到對象類名的方法

    這篇文章主要介紹了javascript實現(xiàn)類似java中getClass()得到對象類名的方法,實例分析了javascript實現(xiàn)java中getClass方法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-07-07
  • js如何準確獲取當前頁面url網(wǎng)址信息

    js如何準確獲取當前頁面url網(wǎng)址信息

    這篇文章主要為大家介紹了js準確獲取當前頁面url網(wǎng)址信息的多種方法,包括正則法、split拆分法等,需要的朋友可以參考下
    2016-04-04
  • js實現(xiàn)移動端吸頂效果

    js實現(xiàn)移動端吸頂效果

    這篇文章主要為大家詳細介紹了js實現(xiàn)移動端吸頂效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-01-01
  • 原生JavaScript實現(xiàn)留言板

    原生JavaScript實現(xiàn)留言板

    這篇文章主要為大家詳細介紹了原生JavaScript實現(xiàn)留言板,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-01-01
  • 一文幫你理解PReact10.5.13源碼

    一文幫你理解PReact10.5.13源碼

    這篇文章主要介紹了一文幫你理解PReact10.5.13源碼,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-04-04
  • js實現(xiàn)自定義下拉框

    js實現(xiàn)自定義下拉框

    這篇文章主要為大家詳細介紹了js實現(xiàn)自定義下拉框,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-11-11
  • 基于Next.js實現(xiàn)在線Excel的詳細代碼

    基于Next.js實現(xiàn)在線Excel的詳細代碼

    Next.js是一款React 開發(fā)框架,它可以幫助我們構建 React 應用程序。作為一個輕量級React服務端渲染應用框架,這篇文章主要介紹了基于?Next.js實現(xiàn)在線Excel,需要的朋友可以參考下
    2022-08-08
  • JavaScript中Object.prototype.toString方法的原理

    JavaScript中Object.prototype.toString方法的原理

    這篇文章主要介紹了JavaScript中Object.prototype.toString方法的原理的相關資料,需要的朋友可以參考下
    2016-02-02
  • javascript顯示中文日期的方法

    javascript顯示中文日期的方法

    這篇文章主要介紹了javascript顯示中文日期的方法,涉及javascript針對日期與字符串操作技巧,需要的朋友可以參考下
    2015-06-06

最新評論