使用 jquery 和 ajax 更新表中的数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17358771/
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
Update data in a table with jquery and ajax
提问by TNK
I am trying to update a table according to ajax respond. My update should be insert as the first row inside <tbody>in my table. With my coding this is happening in my table when I insert data after page is loaded. My problem is when I insert data again without refreshing the page it insert to table as second row inside <tbody>and again insert another its going as third row and so on.
我正在尝试根据 ajax 响应更新表。我的更新应该作为表中的第一行插入<tbody>。通过我的编码，当我在页面加载后插入数据时，这会发生在我的表中。我的问题是当我再次插入数据而不刷新它作为第二行插入到表中的页面时<tbody>，再次插入另一个它作为第三行等等。
But when I am refreshing or reloading the page my table adjusts data in correct order. Can anybody tell me how I fix this problem?
但是当我刷新或重新加载页面时，我的表格会以正确的顺序调整数据。谁能告诉我如何解决这个问题？
This is my code so far :
到目前为止，这是我的代码：
$.ajax({
type: "POST", // HTTP method POST or GET
url: "process.php", //Where to make Ajax calls
//dataType:"text", // Data type, HTML, json etc.
dataType: 'html',
data: {
name: $('#name').val(),
address: $('#address').val(),
city: $('#city').val()
},
success: function(data) {
$('#manage_user table > tbody:first').append(data);
//alert(data);
},
error: function(xhr, ajaxOptions, thrownError) {
//On error, we alert user
alert(thrownError);
},
complete: function() {
//alert('update success');
}
});
UPDATE :This is HTML for my table
更新：这是我的表格的 HTML
<table>
<tr>
<th><input type='checkbox' class='selectAll' name='selectAll' value='' /> Name</th>
<th>Address</th>
<th>City</th>
<th>Edit</th>
<th>Delete</th>
</tr>
<tbody>
// -------- this is the place I need to insert data
<tr>
<td><input type='checkbox' name='' value='' class='' /> sdfsdfs</td>
<td>dsfs</td>
<td>dsfdsf</td>
<td><span class='edit_ico'></span></td>
<td><span class='delete_ico'></span></td>
</tr>
<tr>
<td><input type='checkbox' name='' value='' class='' /> aaaaaaa</td>
<td>dfsdf</td>
<td>dsfsf</td>
<td><span class='edit_ico'></span></td>
<td><span class='delete_ico'></span></td>
</tr>
</tbody>
</table>
采纳答案by som
$('#manage_user table > tbody:last').find('tr:first').before(data);
Try this. check my fiddle : http://jsfiddle.net/W4gYY/3/
尝试这个。检查我的小提琴：http: //jsfiddle.net/W4gYY/3/
If you declared thead then you can use tbody:firstand working fine. You do not mention theadthat is way html treated as default tbody
如果您声明了 thead，那么您可以使用tbody:first并正常工作。你没有提到thead这是 html 被视为默认的方式tbody
If your html look like below :
如果您的 html 如下所示：
<div id="manage_user">
<table>
<thead>
<tr>
<th><input type='checkbox' class='selectAll' name='selectAll' value='' /> Name</th>
<th>Address</th>
<th>City</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type='checkbox' name='' value='' class='' /> sdfsdfs</td>
<td>dsfs</td>
<td>dsfdsf</td>
<td><span class='edit_ico'></span></td>
<td><span class='delete_ico'></span></td>
</tr>
<tr>
<td><input type='checkbox' name='' value='' class='' /> aaaaaaa</td>
<td>dfsdf</td>
<td>dsfsf</td>
<td><span class='edit_ico'></span></td>
<td><span class='delete_ico'></span></td>
</tr>
</tbody>
</table>
</div>
then you can use
然后你可以使用
$('#manage_user table > tbody:first').find('tr:first').before(data);
otherwise without theadin html you have to do following code
否则没有thead在 html 你必须做以下代码
$('#manage_user table > tbody:last').find('tr:first').before(data);
回答by Ayyappan Sekar
There is a jQuery method called after()and it can do the thing you want...
有一个名为after()的 jQuery 方法，它可以做你想做的事情......
$('#manage_user table > tbody:first').append(data);
can be changed to
可以改为
$('#manage_user tr:first').after('<tr><td>first</td></tr>');which inserts the result as first row of the table... Check the demohere
$('#manage_user tr:first').after('<tr><td>first</td></tr>');将结果作为表的第一行插入...在此处查看演示
回答by Instance Noodle
use htmlinstead of append
使用html代替append
success: function(data) {
$('#manage_user table > tbody:first').html(data);
//alert(data);
}
回答by Manoj Kumar Dharani
It is because your appending the data, you should use .html(data) then it will be replaced by your new data
这是因为您附加数据，您应该使用 .html(data) 然后它将被您的新数据替换
回答by aman
here the solution for you
这里为您提供解决方案
OLD :
老的 ：
$('#manage_user table > tbody:first').append(data);
NEW :
新的 ：
$('#manage_user table > tbody').prepend(data);
You need to use prepend at the place of append
您需要在 append 的地方使用 prepend
