Question

我这两天都在努力奋斗！根据SO中的建议，我将添加按钮放在表格页脚中。当它第一次被点击时，它会添加一个新行，这就是我想要的。然而，第二次，它增加了两个新行;第三次，四个新行;第四次，八个新行！它变得越来越糟！

此代码用于向数据库添加成员。第一行是成员自己的信息。其他行供用户将其他成员添加到其组中。所以这是我要克隆的第二行或更晚的行。应该在最后添加新行。

要复制的tr有一个.leaderrow类。我认为jQuery每次都会复制该类的所有行，而不是只复制一行。如何在每次单击按钮时只添加一行？

这是jQuery：

$(document).ready(function(){
    $('#addRow').live('click', function() {
        $('.leaderrow').clone().appendTo('#entries');
    });
})

这是表格，它是表格的一部分：

<table width="100%" border="0" class="unsorted_table">
  <thead>   
      <tr>
           <th>Name*</th>
           <th>Action</th>
      </tr>
  </thead>
  <tbody id="entries">
      <tr>
            <td>User's own name</td>
            <td>&nbsp;</td>
      </tr>
      <tr class="leaderrow">
            <td><select name="leaderid[]" >
              <option value="3">Sue</option>
              <option value="4">Jeannie</option>
              <option value="5">Kerry</option>
              <option value="6">Travis</option>
               </select>
            </td>
            <td><a href="" name="delete_row[]" class="remove">remove</a></td>
       </tr>
    </tbody>
    <tfoot>
       <tr> 
            <td><p><input type="button" id="addRow" value="Add Another" /></p></td>
       </tr>
    </tfoot>
</table>

Answer 1

首先，$('.leaderrow')选择与该类匹配的所有元素。您可以使用.first()，.last()或.eq()来选择特定的一个。

但是我建议你添加一个克隆的HIDDEN .leaderrow.template（包含两个类），然后在添加之前添加.removeClass('templaterow')。

此外，如果您正在处理多个表格，您可能希望使用.closest()执行某些操作来限制您要搜索的区域：

var tmpl = $(this).closest('table').find('.leaderrow.template');
tmpl.clone().removeClass('template').insertBefore(tmpl);
// and use CSS:
// .leaderrow.template { display: none; }

使用jQuery clone只复制带有classname的1行

1 个答案: