Question

When triggered, the 3rd (bottom) row of a table is cloned. In the CSS, this row (#tr3) is set to: display:none; Here is the table row I am cloning:

<tr name="tr3" id="tr3">
    <td><input type="text" name="dt1" id="dt1"></td>
    <td><input type="text" name="fn1" id="fn1"></td>
    <td><a href="#" name="change1" id="change1">change</a></td>
    <td><a href="#" name="del1" id="del1">delete</a></td>
</tr>

This is the JQuery code to clone the row. Not mine, sadly, so I don’t understand all of it.

$("table tr:nth-child(4)").clone().find("input").each(function() {
    $(this).val('').attr('id', function(_, id) {
    return id + count;
});

Specifically, how does the function in line 2 work – what is the underscore?

Here’s what I came for, though. How can I:

1. change the style to display:block for cloned rows, and
2. update the ids of the anchor tags in the cloned rows. The IDs of the input fields Do update (e.g. fn1 => fn11, fn12, fn13, fn14, etc).

Thank you.

Answer 1

Just for clarity:

var $clone = $("table tr:nth-child(4)").clone();

1. How to change the style to display:block for cloned rows?

   $clone.show();
   

2. How to update the ids of the anchor tags in the cloned rows.

   $clone.find("a, input").each(function() {
     $(this).val('').attr('id', function(_, id) {
       return id + count;
     });
   });
   

3. In the jQuery code above, how does the function in line 2 work – what is the underscore?

   The underscore (_) is a valid ECMAScript’s identifier name and it is used simply as a placeholder to be able to grab the second argument (id.)

And everything altogether (untested.)

$("table tr:nth-child(4)")
  .clone()
  .show()
  .find("a, input").each(function() {
    $(this).val('').attr('id', function(_, id) {
      return id + count;
    });
  });