1

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

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

到目前为止，这是我的代码：

$.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

<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>
4

5 回答 5

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

试试这个。检查我的小提琴：http: //jsfiddle.net/W4gYY/3/

如果您声明了thead，那么您可以使用tbody:first并正常工作。您没有提到thead将 html 视为默认的方式tbody

如果您的 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='' />&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);

否则没有theadhtml 你必须做以下代码

$('#manage_user table > tbody:last').find('tr:first').before(data);
于 2013-06-28T07:06:23.820 回答
0

使用html而不是append

success: function(data) {
        $('#manage_user table > tbody:first').html(data);
        //alert(data);
}
于 2013-06-28T06:50:53.200 回答
0

这是因为您附加数据，您应该使用 .html(data) 然后它将被您的新数据替换

于 2013-06-28T06:51:30.407 回答
0

这里是你的解决方案

老的 ：

$('#manage_user table > tbody:first').append(data);

新的 ：

$('#manage_user table > tbody').prepend(data);

您需要在追加的地方使用 prepend

于 2013-06-28T06:55:51.917 回答
0

有一个名为after()的 jQuery 方法，它可以做你想做的事情......

$('#manage_user table > tbody:first').append(data);

可以改为

$('#manage_user tr:first').after('<tr><td>first</td></tr>'); 它将结果作为表格的第一行插入...在此处查看演示

于 2013-06-28T07:12:17.580 回答