如何在使用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(与链接的类相同的原因).看到这个jsfiddle作为证明.