3

我想要一个包含字段表和我希望用户能够复制的一些字段的表单。想象一张发票有一些标题字段（即发票日期、客户名称等），然后有多个明细行（即产品、数量、价格），其中可能有任意数量，最后是一些页脚字段（即税、总计等）。我想最初用一个详细信息行显示表单，并让用户单击一个按钮以添加更多详细信息行，我想使用 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');
  });
});

这意味着选择我想要复制的整个行块，然后克隆它并在复制块之后立即插入它。

这行得通，但我遇到的问题是，在单击“添加行”按钮后，我最终得到了两个 tbody 块，它们都具有“multi”类。所以第二次单击 Add Line 按钮时，我克隆了两个 tbody 块，最终得到了四个 tbody！

解决此问题的最佳方法是什么？我是否应该尝试更改新复制的 tbody 的类，使其不会包含在未来的复制中？还是有更好的方法来完全处理这个问题？

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

4

1 回答 1

2

如果您想要多个<tbody>s （这很好并且可以很好地组织 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/

于 2012-05-08T06:12:25.620 回答