追加した後、jQueryで表の行をリセット/削除する

Question

<table id="myTable" style="width: 650px;"> 
    <tbody> 
    <tr style="font-weight: bold;"> 
     <td>Name</td> 
     <td>Price</td> 
     <td>Supplier</td> 
     <td>Amount</td> 
     <td>Basket</td> 
    </tr> 
    </tbody> 
</table> 

は私のHTMLです。

これが私の現在のjQueryのJSです：

$.post('/ajax/products', { method: 'search', string: searchstring, category: $('#search_category').val() }, function(data) { 
     data = $.parseJSON(data); 
      $('#myTable > tbody:last').append('<tr><td>'+b.name+'</td><td>'+b.price+'</td><td></td><td></td></tr>'); 
     }); 
    }); 

あなたがアップキーたびに、上記のjs実行。クッキーを探して書き込みを開始すると、 "C"、 "Co"、 "Coo"などのAjaxポストが送信されます。

既に最初のajax呼び出しで、したがって、それはテーブルに追加されます。今度は "Co"の結果も見つけました（これは "C"と同じ結果です。

クー、クック、クッキー、クッキー、クッキーと同じ...ええ、あなたはポイントを得る。そして、この結果はお互いの下にテーブルがたくさん付いています。

私がしたいのは、#myTables tbody内の<tr>のtbodyを（実際に$ .post（）の直前に）追加/削除する前の状態です。

しかし、最初の<tr>は削除してはいけません。これは、上記のhtmlでわかるように、列ヘッダーです。

どうすればいいですか？あなたが書くことができ、あなたのhtmlを変更せずに

Answer 1

：

var rows = $('#myTable').find('tr'); 
rows.each(function(index, value) { 
    if (index > 0) { 
    $(value).remove(); 
    } 
}); 
$('#myTable > tbody:last').append('<tr><td>'+b.name+'</td><td>'+b.price+'</td><td></td><td></td></tr>'); 

私の推薦しかし、あなたのテーブルのヘッダーにthを使用することです：

<table id="myTable" style="width: 650px;"> 
    <thead> 
    <tr style="font-weight: bold;"> 
     <td>Name</td> 
     <td>Price</td> 
     <td>Supplier</td> 
     <td>Amount</td> 
     <td>Basket</td> 
    </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table> 

次に使いのブラウザではJavaScriptが使用できます

$('#myTable > tbody').empty().append('<tr><td>'+b.name+'</td><td>'+b.price+'</td><td></td><td></td></tr>');