如何在使用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);
});
});
它会在表格中添加一行，每次点击具有类add-author的链接（只是为了确保没有其他链接受到影响），将每个插入字段名称末尾的数字递增1。被插入到具有类authors-list的表的末尾（与用于链接的类相同的原因）。 看到这个jsfiddle作为证明。
看看这里。
您可能需要在每次迭代中增加名称属性中的数字。
给你的表一个id，假设my_table和一个id给锚点a假设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;
}
}
上一篇: How do I add an extra html table row upon button click using jQuery?