Question

我希望有一个表单，其中包含一个字段表和一些我希望用户能够复制的字段。想象一下，发票上有一些标题字段（即发票日期，客户名称等），然后有多个明细行（即产品，数量，价格）可能有任意数量，最后是一些页脚字段（即税，总计等）。我想最初显示带有一个细节线的表单，让用户点击一个按钮添加更多细节线，我想用jQuery做这个。

我发现了多个展示如何克隆单个表行的示例，但我想制作一些更灵活的东西;我希望能够指定多个表行，并在单击按钮时克隆它们。

到目前为止，我有以下代码：

<form action="" method="post">
  <table border="0" align="center" cellpadding="2" cellspacing="1" id="invoice">
    <tr>
      <td>Name:</td>
      <td><input name="name" type="text" id="name" size="50" maxlength="100"></td>
    </tr>
    <tbody class="multi">
      <tr>
        <td>Product:</td>
        <td><input name="product[]" type="text" size="50" maxlength="50"></td>
      </tr>
      <tr>
        <td>Qty:</td>
        <td><input name="qty[]" type="text" size="5" maxlength="5"></td>
      </tr>
      <tr>
        <td>Price:</td>
        <td><input name="price[]" type="text" size="10" maxlength="10"></td>
      </tr>
    </tbody>
    <tr>
      <td>Tax:</td>
      <td><input name="tax" type="text" id="tax" size="10" maxlength="10"></td>
    </tr>
      <td>&nbsp;</td>
      <td><input type="button" id="addline" value="Add Another Line">
        <input name="Submit" type="submit" value="Submit Invoice"></td>
    </tr>
  </table>
</form>

此示例已缩短此HTML，但您会看到我通过将它们放在具有“multi”类的tbody中来指定要克隆的表行。我将使用PHP来处理提交的表单，因此[]将在要复制的字段的末尾（这将使用PHP的数组处理功能）。在要复制的行的上方和下方可能有任意数量的表行，但为了简洁，我只显示了一行。

然后我有一些看起来像这样的JavaScript：

$(document).ready(function($) {
  $('#addline').click(function() {
    $('#invoice > tbody.multi').clone().insertAfter('#invoice > tbody.multi');
  });
});

这是为了选择我想要复制的整个行块然后克隆它并在重复块之后立即插入它。

这样可行，但我遇到的问题是，在点击Add Line按钮后，我最终得到了两个tbody块，两个都是“multi”类。因此，第二次单击“添加行”按钮时，我会同时克隆两个tbody块，最后得到四个tbody！

解决此问题的最佳方法是什么？我是否应该尝试更改新复制的tbody的类，以便将来不会包含它？或者有更好的方法来完全处理这个问题吗？

请记住，我希望能够一次复制多个表行，而不仅仅是我在许多示例中看到的一行。另外我在一些例子中看到它们包含了要在jQuery代码中复制的所有表格和表单HTML，这对我来说似乎是一种不整齐的方式。最后，清除任何重复字段的值并能够删除重复的块会很好。

Answer 1

如果你想要多个<tbody>（这很好并且保持HTML组织得很好），那么只需混合:last以在克隆时仅选择最后tbody.multi并再次添加最后的克隆：

$('#addline').click(function() {
    $('#invoice > tbody.multi:last').clone().insertAfter('#invoice > tbody.multi:last');
});

然后，您可以通过简单的val调用清除克隆的输入：

$('#addline').click(function() {
    var clone = $('#invoice > tbody.multi:last').clone();
    clone.find('input').val('');
    clone.insertAfter('#invoice > tbody.multi:last');
});

演示：http://jsfiddle.net/aeYED/1/

使用jQuery克隆多个表行

1 个答案: