按钮 在 JavaScript 中单击以在表格中添加一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14928656/
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
Button Click in JavaScript to add a row in the table
提问by user1460819
My task is to make a page with a table and a button. When the user presses a button, one row is added to the table.
So, I have a button on my html page ( <button id="my_button">Bla-bla</button>),
and a table ( <table id="my_table">). And I have a separate file for JavaScript. In that file I wrote:
我的任务是制作一个带有表格和按钮的页面。当用户按下按钮时，会在表格中添加一行。所以，我的 html 页面上有一个按钮 ( <button id="my_button">Bla-bla</button>) 和一个表格 ( <table id="my_table">)。我有一个单独的 JavaScript 文件。在那个文件中我写道：
$(function() {
$(my_button).click(function(){
tbl = document.getElementById("my_table");
row = tbl.insertRow(0);
var newCell = row.insertCell(0);
newCell.height=300;
newCell.innerHTML="Some New Text";
});
});
But there is a problem: when I press the button, the row is added for several milliseconds, then it vanishes and I see the table without the new row again. What is the problem and how can I solve it?
但是有一个问题：当我按下按钮时，该行添加了几毫秒，然后它消失了，我再次看到没有新行的表格。有什么问题，我该如何解决？
回答by meub
回答by Giles Smith
Without seeing your mark up it could be as the system's comment suggested that the form is submitting and the page is refreshing.
没有看到您的标记，可能是因为系统的评论表明表单正在提交并且页面正在刷新。
If this is the case, the simple solution is to use the event.preventDefault() in your handler:
如果是这种情况，简单的解决方案是在处理程序中使用 event.preventDefault()：
$(function() {
$(my_button).click(function(){
event.preventDefault();
tbl = document.getElementById("my_table");
row = tbl.insertRow(0);
var newCell = row.insertCell(0);
newCell.height=300;
newCell.innerHTML="Some New Text";
});
});
});
You ca read more about the preventDefault in the jquery docs
您可以在jquery 文档中阅读有关 preventDefault 的更多信息
As per other answers, if you have access to jquery, you can tidy up the method by using it throughout the code.
根据其他答案，如果您有权访问 jquery，则可以通过在整个代码中使用它来整理该方法。
回答by Kumar
here a small example
这是一个小例子
html code
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>
jquery code
查询代码
var counter = 1;
jQuery('a.add-author').click(function(event){
event.preventDefault();
counter++;
var newRow = jQuery('<tr><td><input type="text" name="first_name' +
counter + '"/></td><td><input type="text" name="last_name' +
counter + '"/></td></tr>');
jQuery('table.authors-list').append(newRow);
});
see this link for working this code http://jsfiddle.net/yUfhL/
请参阅此链接以使用此代码 http://jsfiddle.net/yUfhL/
回答by K. Uzair
<script type="text/javascript">
$(document).ready(function(){
$(document).on("click","td.addNewButton",function(e) {
var row = $(this).parent().parent().children().index($(this).parent());
var html = $('#myTable tbody tr:eq('+row+')').html();
$('#myTable tbody tr:eq('+row+')').after('<tr>'+html+'</tr>');
});
});
</script>
This will do nicely for you :)
这对你有好处:)
