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

Question

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

12

我有以下代码：

<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()，但不确定如何在我的情况下使用它。我想能够添加无限数量的新表行。我该怎么做？

- Simon Suh

请参考以下链接，了解如何使用jQuery添加表格行：https://dev59.com/P3VC5IYBdhLWcg3w1E1q - Rupesh Pawar

3个回答

3

点击这里查看。

你可能需要增加每个迭代中名称属性中的数字。

- Shomz

0

给你的表格一个id，假设为my_table，将锚点a命名为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;

  }
}

- Ghost-Man

-1 意味着不使用“var”关键字来创建新变量，这会使它们成为全局变量并污染全局命名空间。第二个原因是在 HTML 中对引号的不一致使用。第三个原因是不使用 event.preventDefault()（这将提高代码的可用性），但我无法给出 -3 而不是 -1。抱歉。 - Tadeck

是的，你说得对。我只是提供了使用他的HTML代码创建新行的最小解决方案。从他新创建的元素中获取值将是一个问题，但正如他所提到的，他想创建无限行，似乎只是为了测试。无论如何，你的代码是一个实际的解决方案。谢谢！ - Ghost-Man

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tadeck · Accepted Answer

首先，将您的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的表格末尾（与链接类相同）。可以查看这个 jsfiddle 来验证。