如何在使用 jQuery 单击按钮时添加额外的 html 表格行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8018304/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I add an extra html table row upon button click using jQuery?
提问by Simon Suh
I have the following:
我有以下几点：
<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>
and each time I click the link tag to 'add author', I want to create an extra table row like the following:
每次单击链接标签以“添加作者”时，我都想创建一个额外的表格行，如下所示：
<tr><td><input type='text' name='first_name2' /></td><td><input type='text' name='last_name2'</td></tr>
I looked at .append() and I'm not sure exactly how to use it for my situation. And I'd like to be able to add infinite amount of new table rows. How do I do this?
我查看了 .append() ，但不确定如何在我的情况下使用它。我希望能够添加无限数量的新表格行。我该怎么做呢？
回答by Tadeck
Firstly, correct your HTML as:
首先，将您的 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>
(I have added indents only for visibility) and do not use inline JavaScript. Plus, be consistent, preferably use "(double quotes) for HTML attributes, '(single quotes) for JavaScript strings.
（我添加缩进只是为了可见）并且不使用内联 JavaScript。另外，保持一致，最好"对 HTML 属性使用（双引号），'对 JavaScript 字符串使用（单引号）。
Second, do something like that:
其次，做这样的事情：
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);
});
});
It will add a row to the table with each click on the link having class add-author(just to be sure no other link is influented), incrementing number at the end of the name of every inserted field's name by 1. The row will be inserted at the end of the table having class authors-list(same reason as with class for a link). See this jsfiddleas a proof.
每次单击具有类的链接add-author（只是为了确保没有其他链接受到影响），它将在表中添加一行，将每个插入字段名称的名称末尾的数字增加 1。该行将被插入具有类的表的末尾authors-list（与用于链接的类相同的原因）。见这个的jsfiddle作为证据。
回答by Shomz
回答by Ghost-Man
Give an id to your table, suppose my_table and an id to the anchor a suppose my_button then try the below:
给你的表一个 id，假设 my_table 和一个 id 给锚一个假设 my_button 然后尝试以下操作：
Your modified code:
您修改后的代码：
<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>
And add the below script after including the jquery library in your page.
并在页面中包含 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;
}
}
