CODEWITHSUNDEEP
javascriptjqueryhtml
Nico Rivera
Nico Rivera

Reputation: 43

Clear table using jQuery

When I call the function loadTable the first time, the information is displayed correctly, if I call the function again the information is displayed twice in the HTML page (one below the other).

Try deleting the information before the for loop with:

$("#tabla").remove();
$("#tabla").empty();

But the information is not deleted.

HTML:

<div id="divTabla"><table style="width:100%" border="1" id="tabla"></table></div>

JavaScript:

function loadTable(datos) {
for (var i = 1; i < datos.length; i++) {
    d+= '<tr>'+
    '<td>'+datos[i].Host+'</td>'+
    '<td>'+datos[i].Time+'</td>'+
    '<td>'+datos[i].Country+'</td>'+
    '<td>'+datos[i].City+'</td>'+
    '<td>'+datos[i].Isp+'</td>'+
    '<td>'+datos[i].Latitude+'</td>'+
    '<td>'+datos[i].Longitude+'</td>'+    
    '</tr>';
}
$("#tabla").append(d);
}

Does anyone know what is wrong with the code or how do I delete the information correctly?

Edit:

When I called the methods, I do it as follows:

function cargarTabla(datos) {
//Using only one at a time    
$("#tabla").empty(); //Doesn't work
$("#tabla").remove(); //The table is never displayed
for (var i = 1; i < datos.length; i++) {
    d+= '<tr>'+
    '<td>'+datos[i].Host+'</td>'+
    '<td>'+datos[i].Time+'</td>'+
    '<td>'+datos[i].Country+'</td>'+
    '<td>'+datos[i].City+'</td>'+
    '<td>'+datos[i].Isp+'</td>'+
    '<td>'+datos[i].Latitude+'</td>'+
    '<td>'+datos[i].Longitude+'</td>'+    
    '</tr>';
}
$("#tabla").append(d);
}

Variable declaration d: It is declared in the same js file where the loadTable function is located, in the following way (It is the header of the table):

var d = '<tr>'+'<th>Host</th>'+'<th>Time(ms)</th>'+'<th>Pais</th>'+'<th>Ciudad</th>'+'<th>ISP</th>'+'<th>Latitud</th>'+'<th>Longitud</th>'+'</tr>';

Upvotes: 4

Views: 5060

Answers (3)

Dustin G
Dustin G

Reputation: 46

.remove() will remove the table. Call just .empty() on the first line within the function loadTable. Also the variable 'd' was never declared, or it was declared out of the code you posted and never gets reset. Define d within the function to load the table and set it to empty. also you are starting your for loop at 1, start it at 0 if you do not want to exclude the first row. 

loadTable([{Host: 'host', Time: 'time', Country: 'country', City: 'city', Isp: 'isp', Latitude: 'latitue', Longitude: 'longitude'}]);

function loadTable(datos) {
$("#tabla").empty(); 
var d = '';
for (var i = 0; i < datos.length; i++) {
    d+= '<tr>'+
    '<td>'+datos[i].Host+'</td>'+
    '<td>'+datos[i].Time+'</td>'+
    '<td>'+datos[i].Country+'</td>'+
    '<td>'+datos[i].City+'</td>'+
    '<td>'+datos[i].Isp+'</td>'+
    '<td>'+datos[i].Latitude+'</td>'+
    '<td>'+datos[i].Longitude+'</td>'+    
    '</tr>';
}
$("#tabla").append(d);
}

Upvotes: 0

epascarello
epascarello

Reputation: 207527

The problem here is NOT with empty() not working. The issue is you use the variable d and you never reset it so it holds the values form the previous time. 

function loadTable(datos) {
  var d = ""; // <--------
  for (var i = 1; i < datos.length; i++) {
    d+= '<tr>'+
    '<td>'+datos[i].Host+'</td>'+
    '<td>'+datos[i].Time+'</td>'+
    '<td>'+datos[i].Country+'</td>'+
    '<td>'+datos[i].City+'</td>'+
    '<td>'+datos[i].Isp+'</td>'+
    '<td>'+datos[i].Latitude+'</td>'+
    '<td>'+datos[i].Longitude+'</td>'+    
    '</tr>';
  }
  $("#tabla").empty().append(d);
}

Upvotes: 3

Osama
Osama

Reputation: 3040

Change the last line of the function to this

$("#tabla").empty().html(d);

Upvotes: -1

Related Questions