CODEWITHSUNDEEP
javascriptjquery
nina_berlini
nina_berlini

Reputation: 195

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

I have a table which shows me results when I click on a search button. It works so far, you can see it here:

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

The Problem is, that it appends the results when I click the search button more then one times. It should first remove the old rows (or the whole tbody). I have tried a lot like this:

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

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

but it didnt work in my example. Can sombody make a working example, which schows only three rows even when I click the search-button two times or more often?

Upvotes: 1

Views: 2975

Answers (4)

Ibrahim İnce
Ibrahim İnce

Reputation: 178

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

I think you can use this one as well.

Upvotes: 0

zed
zed

Reputation: 143

Write $("#table tbody").empty(); before append

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

Upvotes: 1

Franco
Franco

Reputation: 2329

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

Upvotes: 0

Sathvik Chinnu
Sathvik Chinnu

Reputation: 575

Replace append with html.

Check the code here

Upvotes: 1

Related Questions