Question

我正在运行此代码：

$('#storeTable').empty();

$('#storeTable').append("<tr>");
$('#storeTable').append("<td>");
$('#storeTable').append(returnData["1"]["ID"]);
$('#storeTable').append("</td>");
$('#storeTable').append("</tr>");

但是如果我在一个页面加载中多次运行它，那么'storeTable'元素会在每次运行时变得更高更高。我错过了一些明显的东西，这是jQuery / JavaScript的问题，是我的浏览器（Chrome）的错，还是我做错了什么？

代码显然需要改进，我只是试图对页面的动态部分进行简单的实现。

如果您有任何其他详细信息，请询问，而不是仅仅在没有评论的情况下进行投票。

storeTable当然也是一张桌子。

Answer 1

您无法使用.append()附加部分HTML。。append()只附加整个形成的对象，当它附加它们时，它会将它们作为目标对象的最后一个子对象附加。

除此之外，一些浏览器正在挑选如何创建/删除表格中的内容。

假设#storeTable是<table>标记，您可以指定.html()一次创建一个全新的表：

$("#storeTable").html("<tr><td>" + returnData["1"]["ID"] + "</td></tr>");

工作演示：http://jsfiddle.net/jfriend00/5BVdX/

Answer 2

$('#storeTable').empty();

// Will create three rows, one after another
$('#storeTable').append("<tr><td>123</td></tr>");
$('#storeTable').append("<tr><td>456</td></tr>");
$('#storeTable').append("<tr><td>789</td></tr>");

// Will create three rows, each next replaces previous
$('#storeTable').html("<tr><td>123</td></tr>");
$('#storeTable').html("<tr><td>456</td></tr>");
$('#storeTable').html("<tr><td>789</td></tr>");

清空并追加元素的扩展高度

2 个答案: