使用 jQuery 清除表格答案

【问题标题】：Clear table using jQuery使用 jQuery 清除表格
【发布时间】：2018-03-28 14:58:19
【问题描述】：

当我第一次调用函数loadTable时，信息显示正确，如果我再次调用该函数，信息在HTML页面中显示两次（一个在另一个下面）。

尝试删除for循环之前的信息：

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

但信息并没有被删除。

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

有谁知道代码有什么问题或如何正确删除信息？

编辑：

当我调用方法时，我会这样做：

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

变量声明d：在loadTable函数所在的同一个js文件中声明，方式如下（是表头）：

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

【问题讨论】：

你可以使用$("#tabla").html(d);而不是$("#tabla").append(d);
您是否尝试过使用$("#tabla td").empty()？
@arielnmz 是的，但它不起作用
不要使用$("#tabla").remove()，因为那样会删除表本身。我原以为$("#tabla").empty(); 会起作用——你能提供一个演示证明它不起作用吗？或者试试$("tabla tr").remove()。
我相信这是 stackoverflow.com/a/8053924/3196753 的副本。 $("#tabla > tbody").empty(); 注意，tbody，而不是 tr。

标签： javascript jquery html

【解决方案1】：

这里的问题不是 empty() 不起作用。问题是您使用变量 d 并且您从未重置它，因此它保留了上次的值。

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

【讨论】：

你是我的英雄，非常感谢，这样就解决了问题。

【解决方案2】：

.remove() 将删除该表。只需在函数 loadTable 的第一行调用 .empty()。此外，从未声明过变量“d”，或者它是在您发布的代码中声明的并且永远不会被重置。在函数中定义 d 以加载表并将其设置为空。你也从 1 开始你的 for 循环，如果你不想排除第一行，从 0 开始。

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

【讨论】：

【解决方案3】：

把函数的最后一行改成这个

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

【讨论】：

我没有投票，但.empty()不是一种方法吗？此外，OP 说他们已经尝试了 .empty() 和 .remove()。
不起作用，信息显示正确，但在第二次调用中它开始累积而不清理之前加载的内容。