JavaScript动态添加和删除行

本文介绍了一种使用JavaScript实现的动态表格操作方法,包括如何添加和删除表格行,并在删除行后更新序号。此方法适用于需要频繁修改表格内容的应用场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//添加按钮定义中的按钮

    function addBtnRow() {      

        var table = document.getElementById('btnList');

        var rownum = table.rows.length;

        var newrow = table.insertRow(rownum);

        var newcell = newrow.insertCell();

        newcell.innerHTML = "<input name='checkbox' type='radio' value='1'><input name='flags' type='hidden' value='1' ><input name='confIds' value='' type='hidden' />&nbsp;"+rownum;

        newcell = newrow.insertCell();

        newcell.innerHTML = "<input name='bvalue' value='' type='text' style='width:100%' >";

        newcell = newrow.insertCell();

        newcell.innerHTML = "<input name='bevent' value='' type='text' style='width:500px' ondblclick=openWin(this,'395','200'); >";

        newrow.cells[1].children[0].focus();

    }

   

    //删除按钮定义中的按钮

    function delBtnRow(){

         var table = document.getElementById("btnList");

         for(var i=1; i<table.rows.length; i++){

             if(table.rows[i].cells[0].children[0].checked){

                 if(table.rows[i].cells[0].children[2].value!=""){

                     document.forms[0].delConfId.value+=table.rows[i].cells[0].children[2].value+"@";

                   }

                 table.deleteRow(i);

             }

         }

       for(var i=1; i<table.rows.length; i++){//删除某行后,重新调整序号值

                    table.rows[i].cells[0].innerHTML = "<input name='checkbox1' type='radio' value='1'>&nbsp;"+i;

              }

}  

    应用举例:

<table id="btnList" width="100%" class="tabDef">

       <tr>

           <td nowrap align="center" width="10%">序号</td>

           <td nowrap align="center" >名称</td>

           <td nowrap align="center" width="500">方法或脚本</td>

       </tr>

    </table>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值