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，但是如何增加名称属性呢？任何有关更简单和/或更高效地编写此内容的提示也将受到赞赏。

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);
    });
});