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

问题描述

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

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

这是我目前的代码:

$.ajax({type: "POST",//HTTP 方法 POST 或 GETurl: "process.php",//在哪里进行ajax调用//dataType:"text",//数据类型，HTML，json 等数据类型:'html'，数据: {名称:$('#name').val(),地址:$('#address').val(),城市:$('#city').val()},成功:功能(数据){$('#manage_user table > tbody:first').append(data);//警报(数据)；},错误:函数(xhr，ajaxOptions，throwedError){//出错时，我们提醒用户警报(抛出错误)；},完成:函数(){//alert('更新成功');}});

更新:这是我的表格的 HTML

<tr><th><input type='checkbox' class='selectAll' name='selectAll' value=''/>名称<th>地址</th>第<第>个城市个<th>编辑</th><th>删除</th></tr>//-------- 这是我需要插入数据的地方<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>

解决方案

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

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

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

如果您的 html 如下所示:

<表格><头><tr><th><input type='checkbox' class='selectAll' name='selectAll' value=''/>名称<th>地址</th>第<第>个城市个<th>编辑</th><th>删除</th></tr></thead><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>

然后你可以使用

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

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

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

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

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

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

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

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>

then you can use

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

otherwise without thead in html you have to do following code

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

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