jQuery：向表中添加行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40765266/
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
jQuery: Adding rows to a table
提问by SuperTasche
I'm completely new to JavaScript and jQuery and now I am trying to modify a html table.
我对 JavaScript 和 jQuery 完全陌生，现在我正在尝试修改 html 表。
Every time a button is clicked, the some stuff (input, text, button) should be added as the last row. I managed that for the first row, but when I click the button again, the next input will be added next to the last row and not under it. I don't understand why. Hope you can help.
每次单击按钮时，都应将一些内容（输入、文本、按钮）添加为最后一行。我对第一行进行了管理，但是当我再次单击该按钮时，下一个输入将添加到最后一行旁边而不是在它下面。我不明白为什么。希望你能帮忙。
This is my html file:
这是我的 html 文件：
...
<main>
<article id="main">
...
<section id="neue vorschlaege">
...
<table id="vorschlaege">
<tr>
<td>Deine Idee</td>
<td>Vorschl?ge</td>
<td>Kategorie</td>
<td>L?schen</td>
</tr>
<!-- I want to insert new rows here -->
</table>
</section>
</article>
...
</main>
And this is my jQuery.js:
这是我的 jQuery.js：
$(document).ready(function(){
$('#abschicken').on('click', function(add){
add.preventDefault();
var name = $("#name").val();
var fvv = $('input[name=FVV]:radio:checked').next('label:first').html();
var zutaten = $("#zutaten").val();
var passwort = $("#pw").val();
$('#vorschlaege > tbody:last-child').append(
'</tr>'
+'<td><input type="checkbox" checked="true"></td>'
+'<td>'+name+'</td>'
+'<td>'+fvv+'</td>'
+'<td><button id="loeschen">l?schen</button></td>'
+'</tr>');
});
});
回答by Psylogic
You started with a </tr>closing tag.
你从一个</tr>结束标签开始。
$('#vorschlaege > tbody:last-child').append(
'<tr>'// need to change closing tag to an opening `<tr>` tag.
+'<td><input type="checkbox" checked="true"></td>'
+'<td>'+name+'</td>'
+'<td>'+fvv+'</td>'
+'<td><button id="loeschen">l?schen</button></td>'
+'</tr>');
