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

我有以下

<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(),我不知道如何使用它为我的情况.而且我想添加无数量的新表行.我该如何做？

解决方法

首先,将您的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.另外,要保持一致,最好为JavaScript字符串使用“(双引号)HTML属性”(单引号).

第二,做这样的事情：

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);

    });
});

它将添加一行到表,每一次点击链接有类添加作者(只是为了确保没有其他链接影响),每个插入字段的名称的名字的末尾增加数字1.行将被插入到具有类作者列表的表的末尾(与链接的类相同的原因).见this jsfiddle作为证明.

原文地址：https://www.jb51.cc/jquery/176873.html