1

ajaxの応答に従ってテーブルを更新しようとしています。私の更新は、テーブルの最初の行として挿入する必要があり<tbody>ます。私のコーディングでは、ページが読み込まれた後にデータを挿入すると、テーブルでこれが発生します。私の問題は、テーブルに挿入するページを更新せずにデータを再度挿入し、2 行目に<tbody>挿入し、別のデータを 3 行目に挿入することです。

しかし、ページを更新または再読み込みすると、テーブルのデータが正しい順序で調整されます。この問題を解決する方法を教えてもらえますか?

これはこれまでの私のコードです:

$.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して正常に動作できます。theadhtmlがデフォルトとして扱われる方法については言及していません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);

それ以外の場合はthead、html を使用せずに次のコードを実行する必要があります

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

ここにあなたのための解決策があります

年 ：

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

新着 ：

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

追加の場所で prepend を使用する必要があります

于 2013-06-28T06:55:51.917 に答える
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

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 に答える