单击鼠标即可从HTML表中删除旧行并插入新行

remove old rows from HTML-table and insert new rows with one click

本文关键字：删除 新行 插入 鼠标 HTML 单击      更新时间：2023-09-26

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

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

但它在我的例子中不起作用。即使我经常点击搜索按钮两次或两次以上，sobody也只能显示三行，这能成为一个有效的例子吗？

将append替换为html。

检查此处的代码

写入$("#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>

$('#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>

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

我想你也可以用这个。

相关文章：