快捷導(dǎo)航

動(dòng)態(tài)添加刪除表格行的js實(shí)現(xiàn)代碼

更新時(shí)間：2014年02月28日 09:43:25 作者：

本篇文章主要是對(duì)動(dòng)態(tài)添加刪除表格行的js實(shí)現(xiàn)代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助

<html>
<head>
<script language="javascript"> 
 //窗口表格增加一行
  function addNewRow(){
   var tabObj=document.getElementById("myTab");//獲取添加數(shù)據(jù)的表格
   var rowsNum = tabObj.rows.length;  //獲取當(dāng)前行數(shù)
   var colsNum=tabObj.rows[rowsNum-1].cells.length;//獲取行的列數(shù)
   var myNewRow = tabObj.insertRow(rowsNum);//插入新行
   var newTdObj1=myNewRow.insertCell(0);
   newTdObj1.innerHTML="<input type='checkbox' name='chkArr' id='chkArr'"+rowsNum+" style='width:20px' />";
   var newTdObj2=myNewRow.insertCell(1);
   newTdObj2.innerHTML="<input type='text' name='nodecode' id='nodecode'"+rowsNum+" style='width:40px' value='"+rowsNum+"'/>";
   var newTdObj3=myNewRow.insertCell(2);
   newTdObj3.innerHTML="<input type='text' name='nodename' id='nodename'"+rowsNum+" style='width:120px' />";
   var newTdObj4=myNewRow.insertCell(3);
   newTdObj4.innerHTML="<input type='text' name='nodeper' id='nodeper'"+rowsNum+" style='width:60px' />";
  }
//窗口表格刪除一行
  function removeRow(){
   var chkObj=document.getElementsByName("chkArr");
   var tabObj=document.getElementById("myTab");
   for(var k=0;k<chkObj.length;k++){
    if(chkObj[k].checked){
     tabObj.deleteRow(k+1);
     k=-1;
    }
   }
  }
</script>
</head>
<body>
<input type="button" name="xx" onclick="addNewRow();" value="增加一行" />
<input type="button" name="yy" onclick="removeRow();" value="刪除一行" />
<table width="600px" border="1" cellpadding="0" cellspacing="0" id="myTab">
        <tr>
         <td width="40px" class="top-bt liebiao-c" align="center" >操作</td>
        <td width="40px" class="top-bt liebiao-c" align="center" >序號(hào)</td>
        <td class="top-bt liebiao-c" align="center" >節(jié)點(diǎn)名稱</td>
        <td width="80px" class="top-bt liebiao-c" align="center" >節(jié)點(diǎn)比例</td>
       </tr>
    </table>
</body>
</html>

您可能感興趣的文章:

相關(guān)文章

探討跨域請(qǐng)求資源的幾種方式（總結(jié)）
這篇文章主要介紹了探討跨域請(qǐng)求資源的幾種方式（總結(jié)），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-12-12
JS小游戲之仙劍翻牌源碼詳解
這篇文章主要介紹了JS小游戲之仙劍翻牌源碼,是一款比較經(jīng)典的卡牌類游戲,對(duì)于javascript游戲設(shè)計(jì)有不錯(cuò)的借鑒價(jià)值,需要的朋友可以參考下
2014-09-09
js實(shí)現(xiàn)簡(jiǎn)單掃雷
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單掃雷，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08
Vue項(xiàng)目中關(guān)于全局css的處理
我們?cè)趯慍SS的時(shí)候，會(huì)遇到大量相同的屬性(比如：margin-top:10px)這種屬性幾乎每個(gè)vue頁(yè)面都有。這個(gè)時(shí)候，我們可以把css掛載到全局上，供所有vue頁(yè)面使用，同時(shí)也方便修改。感興趣的同學(xué)可以參考一下
2023-04-04
基于D3.js實(shí)現(xiàn)時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了基于D3.js實(shí)現(xiàn)時(shí)鐘效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-07-07
全面解析Bootstrap圖片輪播效果
這篇文章主要介紹了全面解析Bootstrap圖片輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2015-12-12
JavaScript Sort 表格排序
JavaScript表格排序?qū)崿F(xiàn)代碼，需要的朋友可以參考下。
2009-10-10
Javascript 瀏覽器事件小結(jié)
Javascript中的事件都是與對(duì)象相關(guān)聯(lián)的，而不是語(yǔ)言本身所有，當(dāng)Javascript在瀏覽器中運(yùn)行的時(shí)候，事件與每個(gè)瀏覽器實(shí)現(xiàn)的DOM模型有關(guān)。
2010-02-02
用JavaScript事件串連執(zhí)行多個(gè)處理過(guò)程的方法
用JavaScript事件串連執(zhí)行多個(gè)處理過(guò)程的方法...
2007-03-03
js前端日歷控件（懸浮、拖拽、自由變形）
這篇文章主要為大家詳細(xì)介紹了js前端日歷控件，可根據(jù)日期自定義日歷上某日的顏色，另外可以懸浮，拖拽，自由變形
2017-03-03