javascript - 单击时从 HTML 表格中动态添加或删除行

Question

我有以下代码可以在单击时动态添加行:

<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 服务器运行它时，它不起作用。

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

Answer 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链接上的点击事件并删除相应的父行。