jQuery增量ID和附加行中子代的名称 [英] jquery increment id and name of children within appended rows

问题描述

大家好.我要以长而复杂的形式向表添加更多行"按钮，并且要添加行，我正在克隆表中的现有行，对其进行修改，然后将其追加到表的末尾.

Hey all. I am adding a "More Rows" button to a table within a long, complex form, and to add the rows, I am cloning an existing row in the table, modifying it, then appending it to the end of the table.

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

The row contains inputs that have id and name attributes that are numbered sequentially (e.g. id="Item_Name1" and name="Item_Name1" for the first row, id="Item_Name2" and name="Item_Name2" for the second row, etc.). I am looking for the best way of continuing this numbering sequence in the appended rows.

这是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，但是我如何也增加名称属性?也欢迎任何关于更简单和/或更高效地编写此文件的提示.

This works for the id's, but how do I also increment the name attributes? Any tips on writing this more simply and/or more performantly are also appreciated.

推荐答案

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

This may or may not be helpful, but here goes:

如果您使用的是PHP，而不是给字段名加上数字后缀，则可能要尝试将其命名为"fieldname []"，但不要给出ID.因此，您将具有如下标记:

If you are using PHP, rather than suffixing the field names with a number, you might want to try naming them like "fieldname[]" and don't give an ID. So you would have markup like this:

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

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

Then when you are checking the values on POST (another assumption I'm making), PHP will automatically create an array for that POST value, which you can access like so:

<?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[]"
}
?>

OR

如果您不使用PHP，那么您所做的一切就可以正常工作.只需为您的ID做相同的事情即可.

If you're not using PHP, what you're doing would work fine. Just do the same thing for name that you're doing for id.

但是，我要指出的是，如果允许删除行，除了基于行数递增之外，还可能要确保具有给定ID的元素不存在.否则，您可能会遇到两行带有后缀"1"和&"的字段的情况. "2"，删除第一行，然后添加一个新行，然后您将获得两行，其后缀为"2"的字段.

However, I would note that if you allow deleting of rows, in addition to incrementing based on the rowcount, you might want to make sure that an element with that given ID doesn't already exist. Otherwise you could have a situation where you have two rows with fields suffixed with "1" & "2", delete the first row and then add a new one, and then you'd have two rows with fields suffixed with "2".

您的代码，设置了名称属性，并检查了ID:

Your code, with the name attribute set, and the id checked:

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

这篇关于jQuery增量ID和附加行中子代的名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！