点击按钮,表格自动增加一行的html代码

最近做到循环添加的功能,希望点击按钮可以自动为table表格增加一行,两种实现方式:

if(name == '添加'){
document.getElementById("opera").value = 'add';
document.form_search.submit();
}else if(name == '继续添加'){
第一种:
var row   = document.getElementById("rowToclone");
   // find row to copy
var table = document.getElementById("add_table");  
   // find table to append to
var clone = row.cloneNode(true);                  
                    // copy children too
var cc    = $("#classify").val();
clone.id  = cc;                                    
                                     // change id or other attributes/contents
table.appendChild(clone);


第二种:
var row = $('#add_table tbody>tr:last').clone(true);
$("td input:text",row).val("");
row.insertAfter('#add_table tbody>tr:last');
return false;
}
    

 不过第一种复制的时候会将目标行的数据也一块儿带过来,第二种不会

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML 表格中,可以使用 JavaScript 在点击按钮时动态添加自动添加号。以下是一个示例: ```html <table id="myTable"> <thead> <tr> <th>序号</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>25</td> </tr> <tr> <td>2</td> <td>李四</td> <td>30</td> </tr> </tbody> </table> <button onclick="addRow()">添加</button> <script> function addRow() { var table = document.getElementById("myTable"); var row = table.insertRow(-1); var rowNum = table.rows.length - 1; var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); cell1.innerHTML = rowNum; cell2.innerHTML = "<input type='text' name='name'>"; cell3.innerHTML = "<input type='text' name='age'>"; } </script> ``` 在上面的代码中,我们首先在表格中设置了一个 `thead` 和一个 `tbody`,并在 `thead` 中添加了表头。然后我们在 `tbody` 中添加了两数据。在按钮上设置了一个 `onclick` 事件,当点击按钮时会调用 `addRow()` 函数。 `addRow()` 函数首先获取表格对象,然后插入一行表格的最后位置。然后获取当前表格数,根据数设置号,并在新中插入单元格并设置单元格内容为号、姓名和年龄的输入框。 注意,这里的号是根据当前表格数计算得出的,因此当删除表格中的时,号就会重新计算。如果需要保证号不重复,可以使用一个计数器来记录当前数。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值