单击时从 HTML 表中动态添加或删除行答案

【问题标题】：Add or remove rows dynamically from HTML table upon click单击时从 HTML 表中动态添加或删除行
【发布时间】：2013-06-26 22:25:05
【问题描述】：

我有以下代码可以在点击时动态添加行：

<script language="javascript">
jQuery(function(){
    var counter = 1;
    jQuery('a.add-author').click(function(event){
        event.preventDefault();
        counter++;
        var newRow = jQuery('<tr><td><input type="text" name="first_name' +
            counter + '"/></td><td><input type="text" name="last_name' +
            counter + '"/></td></tr>');
        jQuery('table.authors-list').append(newRow);
    });
});
</script>
<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>

代码在jsFiddle 中运行良好，但是当我将其复制到记事本并尝试从 WAMP 服务器运行它时，它不起作用。

另一个问题：如何在每行旁边添加一个删除行按钮，以便在单击时删除该行？

【问题讨论】：

您遇到的错误是什么？
您是否包含了对 jQuery 的脚本引用？
点击“添加作者”时只是没有添加行
请打开浏览器内置的开发者控制台，并报告显示的错误。
如果你添加一个按钮到一个标签你可以使用删除行

标签： javascript html

【解决方案1】：

第二个问题的答案（代码略有改动）：

$(function() {

    var $table = $('table.authors-list'),
        counter = 1;

    $('a.add-author').click(function(event){
        event.preventDefault();
        counter++;
        var newRow = 
            '<tr>' + 
                '<td><input type="text" name="first_name' + counter + '"/></td>' +
                '<td><input type="text" name="last_name' + counter + '"/></td>' +
                '<td><a class="remove">remove</a></td>'
            '</tr>';
        $table.append(newRow);
    });

    // Remove rows on click
    $table.on('click', '.remove', function() {
        $(this).closest('tr').remove();
    });
});

http://jsfiddle.net/YsgEL/

所以删除行的最佳方法是监听一些remove-links 上的点击事件并删除相应的父行。

【讨论】：

这正是我想要的。谢谢

【解决方案2】：

您确定已将 JQuery 正确加载到 HTML 文件中吗？ JQuery 可以在 JSFilde 中加载，但可能在您的项目中丢失。

【讨论】：

不，我不确定，如何加载？
将以下内容放入您的 HTML Header（<head> 和 </html> 之间）并检查它是否正常工作。 <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script><script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
你知道如何添加删除行按钮吗？

【解决方案3】：

在<script> 标记之前添加以下代码行：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

这会将 jQuery 库加载到您的网页中，让您可以使用 jQuery 或 $ 对象的所有功能和属性。

【讨论】：

【解决方案4】：

回答您的第一个问题： 请向我们提供更多信息...此问题可能由多种原因引起。

回答你的第二个问题： 您可以将具有类“remove_button”的删除按钮附加到名为“newRow”的变量中，并为其添加一个 ID（即id="remove_button_" + counter）。

单击删除按钮时，调用一个函数，该函数正在提取按钮 ID 的编号，并使用 remove() 函数删除具有相同编号的其他元素

【讨论】：