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都会执行。现在，当你正在寻找Cookies，并开始写作时，它会发送一个带有“C”的ajax帖子，然后是“Co”，然后是“Coo”等。

在第一次ajax调用时，它已经发现以C开头的结果。因此它附加到表中。现在它也找到了“Co”的结果（与“C”相同的结果，因为目前只有db中的Cookie）。

和Coo，Cook，Cooki，Cookie，Cookies一样......是的，你明白了。而且结果很多都是附在彼此之下的表格。

所以我想做的就是在它附加之前（实际上在$ .post（）之前）清除/移除<tr> tbody中#myTables的内容。

但它不应删除第一个<tr>，这是您在上面的html中可以看到的列标题。

我该怎么做？

Answer 1

如果不改变你的HTML，你可以写：

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

在jQuery中添加，重置/删除表行之后

1 个答案: