javascript - 添加更多按钮，在表格底部添加一行

Question

我有这样的表:

<table id="myTable" border="1">
  <tbody>
    <tr><td>Name</td></tr>
    <tr><td><input name="field-1" type="text" /></td></tr>
    <tr><td><input name="field-2" type="text" /></td></tr>
  </tbody>
</table>

我想要一个 ADD MORE 按钮，所以每次当我们点击 ADD MORE 按钮时，它都会添加一个具有唯一名称的新行，例如

<tr><td><input name="field-3" type="text" /></td></tr>
<tr><td><input name="field-4" type="text" /></td></tr>

请提出解决方案。

谢谢!

Answer 1

$('button#add_more').on('click', function() {
    var table = $('table#myTable tbody'),
        len = $('input[type=text]', table).length;
  table.append('<tr><td><input name="field-'+ (len+1)+'" type="text" /></td></tr>');
})

DEMO