javascript - jquery 增加附加行中子项的 id 和名称

Question

大家好。我在一个长而复杂的表格中添加了一个“更多行”按钮，为了添加行，我克隆了表格中的现有行，对其进行修改，然后将其附加到表格的末尾。

该行包含具有按顺序编号的 id 和 name 属性的输入(例如，第一行的 id="Item_Name1"和 name="Item_Name1"，第二行的 id="Item_Name2"和 name="Item_Name2"， ETC。)。我正在寻找在附加行中继续此编号序列的最佳方式。

这是 jQuery:

jQuery.noConflict();

jQuery(document).ready(function($){
  var i = $("table#table-id tbody tr").length;
  $("button#more-rows").click(function() {
      var clonedRow = $("table#table-id tbody tr:first").clone();
      i++;
      $("*[name*='1']", clonedRow).attr('id', function() {
          var attrval = $(this).attr("id");
          var attrval = attrval.replace( /\d/g , "" );
          return attrval + i
          });
      $("table#table-id").append(clonedRow);
  });
});

这适用于 id，但我如何也增加 name 属性？也欢迎任何有关更简单和/或更高效地编写此代码的提示。

Answer 1

这可能有帮助也可能没有帮助，但这里是:

如果您使用的是 PHP，而不是在字段名称后加上数字后缀，您可能想尝试将它们命名为“fieldname[]”并且不要提供 ID。所以你会有这样的标记:

<input type="text" name="Item_Name[]" />

然后当您检查 POST 上的值时(我正在做的另一个假设)，PHP 会自动为该 POST 值创建一个数组，您可以像这样访问它:

<?php
$ItemNames = $_POST['Item_Name'];
foreach($ItemNames as $index => $value) {
   //values are ordered by the order they appeared in the DOM
   //each value in this array will be a value from an input that had name="Item_Name[]"
}
?>

或

如果您不使用 PHP，那么您正在做的事情就可以正常工作。只需对 name 执行与对 id 相同的操作。

但是，我会注意到，如果您允许删除行，除了基于行数递增之外，您可能还需要确保具有给定 ID 的元素不存在。否则，您可能会遇到这样的情况，即您有两行的字段后缀为“1”和“2”，删除第一行然后添加一个新行，然后您将有两行的字段后缀为“2”。

您的代码，设置了 name 属性，并检查了 id:

jQuery.noConflict();

jQuery(document).ready(function($) {
    var i = $("table#table-id tbody tr").length;
    $("button#more-rows").click(function() {
        var clonedRow = $("table#table-id tbody tr:first").clone();
        i++;
        $("*[name*='1']", clonedRow).attr('id', function() {
            var attrval = $(this).attr("id");
            attrval = attrval.replace(/\d/g, "");
            while($('#' + attrval + i).size() > 0) {
                i++;
            }
            return attrval + i;
        }).attr('name', function() {
            var attrval = $(this).attr("name");
            attrval = attrval.replace(/\d/g, "");
            return attrval + i;
        });
        $("table#table-id").append(clonedRow);
    });
});