如何使用 jQuery 在按钮单击时添加额外的 html 表格行？

Question

我有以下几点：

<table>
  <tr><td>author's first name</td><td>author's last name</td></tr>
  <tr><td><input type='text' name='first_name' /></td><td><input type='text' name='last_name' /></td></tr>
</table>
<a href='' onclick='return false;'>Add Author</a>

每次点击链接标签“添加作者”时，我都想创建一个额外的表格行，如下所示：

  <tr><td><input type='text' name='first_name2' /></td><td><input type='text' name='last_name2'</td></tr>

我查看了 .append() ，但我不确定如何在我的情况下使用它。而且我希望能够添加无限数量的新表行。我该怎么做？

Answer 1

首先，将您的 HTML 更正为：

<table class="authors-list">
    <tr>
        <td>author's first name</td><td>author's last name</td>
    </tr>
    <tr>
        <td>
            <input type="text" name="first_name" />
        </td>
        <td>
            <input type="text" name="last_name" />
        </td>
    </tr>
</table>
<a href="#" title="" class="add-author">Add Author</a>

（我添加缩进只是为了可见性）并且不要使用内联 JavaScript。另外，要保持一致，最好对 HTML 属性使用 "（双引号），对 JavaScript 字符串使用 '（单引号）。

其次，做这样的事情：

jQuery(function(){
    var counter = 1;
    jQuery('a.add-author').click(function(event){
        event.preventDefault();

        var newRow = jQuery('<tr><td><input type="text" name="first_name' +
            counter + '"/></td><td><input type="text" name="last_name' +
            counter + '"/></td></tr>');
            counter++;
        jQuery('table.authors-list').append(newRow);

    });
});

每次单击类为add-author 的链接时，它将在表格中添加一行（以确保没有其他链接受到影响），将每个插入字段名称末尾的数字递增1。该行将插入到具有authors-list 类的表的末尾（与链接类的原因相同）。请参阅this jsfiddle 作为证明。

Answer 2

查看here。

您可能希望在每次迭代中增加名称属性中的数量。

Answer 3

给你的桌子一个 id，假设 my_table 和一个 id 给锚点一个假设 my_button 然后尝试以下操作：

您修改后的代码：

<table id="my_table">
<tr><td>author's first name</td><td>author's last name</td></tr>
<tr><td><input type='text' name='first_name' /></td><td><input type='text' name='last_name' /></td></tr>
</table>
<a id="my_button" href='#'>Add Author</a>

并在页面中包含 jquery 库后添加以下脚本。

$(document).ready(function()
{
  new_row="<tr><td><input type='text' name='first_name2' /></td><td><input type='text' name='last_name2'</td></tr>";
  $("#my_button").click(function()
  {    
    $("#my_table").append(new_row);
    return false;

  }
}