从HTML表中删除旧行，只需单击一下即可插入新行

Question

我有一个表格，当我点击搜索按钮时会显示结果。到目前为止，你可以在这里看到它：

$('#search').click(function() {
   data=[{"city":"Berlin","cStatus":"G"},{"city":"Hamburg","cStatus":"G"},{"city":"München","cStatus":"P"}];
  
  if(data){
     var len = data.length;
     var txt = "<tbody>";
     if(len > 0){
        for(var i=0;i<len;i++){
          if(data[i].city && data[i].cStatus){
             txt += "<tr><td>"+data[i].city+"</td><td>"+data[i].cStatus+"</td></tr>";
          }
        }
        if(txt != ""){
          txt +="</tbody>"; 
          $("#table").append(txt);
        }
     }
  }     
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table id="table">
   <thead>
      <tr>
        <th>City</th>
        <th>Status</th>
      </tr>
    </thead>
</table>
<button id="search">suchen</button>

问题是，当我多次单击搜索按钮一次时，它会附加结果。它应首先删除旧行（或整个tbody）。我尝试了很多这样的事情：

var table = document.getElementById('table');
var row = document.getElementsByTagName('tbody')[0];

function deleteRow () {
    row.parentNode.removeChild(row);
};

但它在我的例子中没有用。 sombody可以做一个工作的例子，即使我经常点击两次或更多次搜索按钮，它只能显示三行吗？

Answer 1

将append替换为html。

检查代码here

Answer 2

写$（“＃table tbody”）。empty（）;在追加

之前

$('#search').click(function() {
   data=[{"city":"Berlin","cStatus":"G"},{"city":"Hamburg","cStatus":"G"},{"city":"München","cStatus":"P"}];
  
  if(data){
     $("#table tbody").empty(); // Add this line before append. It will clear the previous data and appends new one.
     var len = data.length;
     var txt = "<tbody>";
     if(len > 0){
        for(var i=0;i<len;i++){
          if(data[i].city && data[i].cStatus){
             txt += "<tr><td>"+data[i].city+"</td><td>"+data[i].cStatus+"</td></tr>";
          }
        }
        if(txt != ""){
          txt +="</tbody>"; 
          $("#table").append(txt);
        }
     }
  }     
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table id="table">
   <thead>
      <tr>
        <th>City</th>
        <th>Status</th>
      </tr>
    </thead>
</table>
<button id="search">suchen</button>

Answer 3

$('#search').click(function() {
   data=[{"city":"Berlin","cStatus":"G"},{"city":"Hamburg","cStatus":"G"},{"city":"München","cStatus":"P"}];
  
  if(data){
     var len = data.length;
     var txt = "<tbody>";
     if(len > 0){
        for(var i=0;i<len;i++){
          if(data[i].city && data[i].cStatus){
             txt += "<tr><td>"+data[i].city+"</td><td>"+data[i].cStatus+"</td></tr>";
          }
        }
        if(txt != ""){
          txt +="</tbody>"; 
          $("#table").html(txt);
        }
     }
  }     
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table id="table">
   <thead>
      <tr>
        <th>City</th>
        <th>Status</th>
      </tr>
    </thead>
</table>
<button id="search">suchen</button>

Answer 4

$(".....").click(function (e) {
                $("....").find('tr').remove();
                $("....").find('thead').remove();
            });

我认为你也可以使用这个。