Jquery .html() 只向表中添加一行答案

【问题标题】：Jquery .html() adds only one row to the tableJquery .html() 只向表中添加一行
【发布时间】：2018-09-28 15:03:33
【问题描述】：

我正在使用append() 向表中添加新行，但问题是我需要在添加新行之前删除旧行。

success: function(response) {
    response.AnArray.forEach( function (arrayItem){
        $('.tableName > tbody').append('<tr>...</tr>');
    });
}

然后我从append() 切换到html()，现在表格中只添加了一行。

注意：

$('.tableName > tbody').empty();

在我的情况下不起作用。

我错过了什么？

【问题讨论】：

然后我切换到html()：你的意思是你把append换成了html？
@Cerbrus 是的，这就是我的意思，已编辑。
您也可以显示当前代码吗？目前的代码是什么样的？
就是这个原因。为什么不直接更改行的内容？
我知道问题所在，当您在循环内使用 html() 函数时，每次循环增加时都会替换内容，尝试在循环内的 var 中创建所有 html 代码，然后使用html() 插入内容

标签： javascript jquery html html-table rows

【解决方案1】：

我的解决方案类似于@Shree，但在此处使用html() 而不是附加。

success: function(response) {
    $('.createPOVTable > tbody').empty();
    var htmlData = '';
    response.AnArray.forEach( function (arrayItem){
      htmlData += '<tr>...</tr>';
    });
    $('.createPOVTable > tbody').html(htmlData)
}

【讨论】：

加一个。

【解决方案2】：

不要在每个循环中都使用追加，因此首先将标记生成为字符串，然后像这样将标记追加到循环之外。

success: function(response) {
    $('.createPOVTable > tbody').empty();
    var html = '';
    response.AnArray.forEach( function (arrayItem){
      html += '<tr>...</tr>';
    });
    $('.createPOVTable > tbody').append(html)
}

【讨论】：

性能问题。每次圆顶操作都比较慢。所以创建字符串并追加一次。
是的，那里不错。
我必须仍然使用 html 而不是附加，请参阅@Gammer 答案。谢谢顺便说一句。

【解决方案3】：

好吧，如果你想删除所有之前的行，你可以做的是

$("#tbodyID").empty();

这将清除表体，然后使用

$("#tbodyID").append('<tr>...</tr>');

所以，你的最终代码应该是这样的

success: function(response) {
   $("#tbodyID").empty();
response.AnArray.forEach( function (arrayItem){
    $("#tbodyID").append('<tr>...</tr>');
});
}

【讨论】：

您的tbody 的Id 是什么？

【解决方案4】：

.html() 在每次迭代时完全替换 tbody 的内容，所以它总是只显示插入的最后一行。相反，在开始迭代之前清空 tbody，然后使用 append 添加新行，如下所示：

success: function(response) {
    $('.createPOVTable > tbody').empty();
    response.AnArray.forEach( function (arrayItem){
        $('.createPOVTable > tbody').append('<tr>...</tr>');
    });
}

【讨论】：