javascript - 复制表行并增加所有名称属性

Question

让我们有一个这样的表:

<table>
 <tr>
  <td><input type="text" name="FirstName1" /></td>
  <td><input type="text" name="LastName1" /></td>
 </tr>
 <tr>
  <td><input type="text" name="FirstName2" /></td>
  <td><input type="text" name="LastName2" /></td>
 </tr>
</table>

我想要一个按钮，该按钮将在表格末尾添加具有递增名称属性的新行，因此它看起来像这样:

<table>
 <tr>
  <td><input type="text" name="FirstName1" /></td>
  <td><input type="text" name="LastName1" /></td>
 </tr>
 <tr>
  <td><input type="text" name="FirstName2" /></td>
  <td><input type="text" name="LastName2" /></td>
 </tr>
 <tr>
  <td><input type="text" name="FirstName3" /></td>
  <td><input type="text" name="LastName3" /></td>
 </tr>
</table>

等等。

到目前为止，我已经有了这个，但它不会增加名称属性:

$("#newRowButton").click(function(){
  $("table tr:last").clone().appendTo("table");
});

Answer 1

$("#newRowButton").click(function() {
  $("table tr:last")
      .clone()
      .appendTo("table")
      .find(':input')
      .attr('name', function(index, name) {
          return name.replace(/(\d+)$/, function(fullMatch, n) {
              return Number(n) + 1;
          });
      })
});

Live demo .