jquery increment id and name of children within appended rows

Question

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.

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.

Here's the 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);
  });
});

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.

Answer 1

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

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[]" />

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

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.

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".

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

Answer 2

Not sure about the whole performantly bit, but couldn't you chain another attr function that functions exactly the same as the first but for the 'name' attribute?

    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
          }).attr('name', function() {
              var attrval = $(this).attr("name");
              var attrval = attrval.replace( /\d/g , "" );
              return attrval + i
          });;
          $("table#table-id").append(clonedRow);
      });
    });