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

Posted 2023-03-05

【中文标题】如何使用 jQuery 在按钮单击时添加额外的 html 表格行？

【英文标题】：How do I add an extra html table row upon button click using jQuery?

【发布时间】：2011-12-22 12:42:38

【问题描述】：

我有以下几点：

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

【问题讨论】：

见***.com/questions/171027/add-table-row-in-jquery

【参考方案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 作为证明。

【讨论】：

我尽可能多地使用单引号，因为它在我编写的所有代码中都少了一个按键，但是如果你能好心给我一个我应该使用双引号的具体原因和你提到的单引号，我很想改变我的编码偏好。我还是编码世界的新手（仅全日制学习了大约 8 个月的 php），很高兴接受任何好的建议。

@Qlidnaque：保持一致并使用不同类型的引号（JavaScript 不同，HTML/CSS 不同，这样可以最大限度地减少出错的机会）。在PHP的情况下更重要，因为当你对不包含任何变量的字符串使用双引号时，你可能会不小心发现自己出现了一些错误而你无法找到它快的。对于 JavaScript，这更多是关于选择编码标准。我尝试关注MooTools' coding standard。

@Tadeck 如何在来自 php 的表格行中显示动态数据？例如，我在所有 tds 中都有选择框，并且数据来自数据库，例如国家/地区、医生专业。提前致谢。

@MuddasirAbbas：这是一个非常广泛的话题 - 答案取决于您是在询问触发更新、从服务器请求、在后端处理、检索、添加到表还是在视觉上显示它清楚的。这个答案实际上只处理“添加到表”部分。如果您更具体一些，我会尽力为您指出正确的资源。

@Tadeck 我正在尝试在用户单击 + 图标并希望在单击 - 图标时隐藏此行时附加同一行。我正在尝试创建此功能，但我很困惑如何在 jquery append 或 after 函数中显示 php 动态数据。谢谢

【参考方案2】：

查看here。

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

【参考方案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;

  

【讨论】：

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

是的，你是对的。我只是提供了使用他的 html 代码创建新行的最小解决方案。从他新创建的元素中获取值将是一个问题，但正如他提到的他想创建 INFINITE 行，它似乎只对测试感兴趣。无论如何，您的代码是一个实用的解决方案。谢谢！