使用jquery和ajax更新表中的数据 [英] Update data in a table with jquery and ajax

问题描述

我正在尝试根据ajax响应更新表.我的更新应作为表中<tbody>中的第一行插入.通过我的编码，当我在页面加载后插入数据时，这会在我的表中发生.我的问题是，当我再次插入数据而没有刷新它插入到表中的页面作为<tbody>中的第二行，并再次插入另一行作为第三行时，依此类推.

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.

但是当我刷新或重新加载页面时，我的表会以正确的顺序调整数据. 谁能告诉我如何解决这个问题?

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'); 
    }
});

更新:这是我的表格的HTML

UPDATE : This is HTML for my table

<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='' />&nbsp;&nbsp;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='' />&nbsp;&nbsp;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>

推荐答案

$('#manage_user table > tbody:last').find('tr:first').before(data);

尝试一下.检查我的小提琴: http://jsfiddle.net/W4gYY/3/

Try this. check my fiddle : http://jsfiddle.net/W4gYY/3/

如果声明了thead，则可以使用tbody:first并正常工作.您不会提及thead，这就是html被视为默认tbody

If you declared thead then you can use tbody:first and working fine. You do not mention thead that is way html treated as default tbody

如果您的html如下所示:

If your html look like below :

<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='' />&nbsp;&nbsp;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='' />&nbsp;&nbsp;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>

然后您可以使用

$('#manage_user table > tbody:first').find('tr:first').before(data);

否则，在html中没有thead的情况下，您必须执行以下代码

otherwise without thead in html you have to do following code

$('#manage_user table > tbody:last').find('tr:first').before(data); 

这篇关于使用jquery和ajax更新表中的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！