JavaScript点击按钮添加控件 和 删除控件

本文介绍了一种使用JavaScript动态创建和删除HTML表格行的方法。通过定义函数tjkj()来增加新的表格行,并在每行末尾添加删除按钮;通过delkj()函数实现点击按钮后删除对应行的功能。该方法适用于需要用户交互填写多组信息的场景。

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

         var num=0;     

       //声明数组保存name后面的数字

       var Snum=new Array();      

       //声明数组删除name后的数字

       var Dnum=new Array();

 

function tjkj()

       { 

            num=num+1;

            var row,cell;

            //alert(num);

            Snum[num-1]=num         

 

            tb=document.getElementById("Table1");

 

            row=tb.insertRow();

            row.id="a"+num;

 

            cell=row.insertCell();

 

            cell.innerHTML="&nbsp&nbsp启程时间:<input name=txtqcsj"+num+" readonly='readonly' id=txtqcsj"+num+" value=''  readonly='readonly' onclick='javascript:calendar()' size=15 type='text'>&nbsp&nbsp&nbsp&nbsp到达时间:<input name=txtdasj"+num+" id=txtdasj"+num+" value='' onclick='javascript:calendar()' size=15 type='text'>&nbsp&nbsp&nbsp&nbsp车船类别:<input name=txtcclb"+num+"  id=txtcclb"+num+" value=''size=15  type='text'> "

 

 

            row=tb.insertRow();

            row.id="b"+num;

            cell=row.insertCell();

           cell.innerHTML="&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp它:<input name=txtqt"+num+" id=txtqt"+num+" value=''size=20 type='text'>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp注:<input  name=txtbz"+num+" id=txtbz"+num+" value='' size=30 type='text'>&nbsp&nbsp<img src='../image/delete.gif' alt='删除' onclick='javascript:delkj("+num+")'  style='cursor:hand'>"

 

document.getElementById("hidS").value=Snum.toString();//记录添加的行号 hidS为隐藏控件HiddenField

           

            }

 

       var fx=0;

       function delkj(n)

       {

       Dnum[fx]=n;

       fx=fx+1;       

       document.getElementById("Table1").deleteRow(document.getElementById("a"+n).rowIndex);

       document.getElementById("Table1").deleteRow(document.getElementById("b"+n).rowIndex);

 

      document.getElementById("hidD").value=Dnum.toString();//记录删除的行号 hidd为隐藏控件HiddenField

 

            }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值