为什么数据没有附加到表中？

Question

我的HTML代码是：

<table id="listDB">
    <tr>
        <th>Select</th>
        <th>ID</th>
        <th>Category ID</th>
        <th>Shop</th>
        <th>Item</th>
        <th>Quantity</th>
        <th>Unit</th>
        <th>Price Based On</th>
        <th>MRP</th>
        <th>Seller's Price</th>
        <th>Last Updated On</th>
    </tr>
</table>

我的jQuery代码是：

$.each(json.listArr.category, function() {
    console.log(this.category);
    $("#listDB").append($('<tr>')).append($('<td>', {
        class   : "catHead",
        colspan : 11,
        text    : this.category
    }));
});

控制台包含console.log(this.category);的输出，列为：

那么，为什么这样获得的数据不会附加到表中呢？我错过了什么吗？

Answer 1

问题：此语法$("#listDB").append($('<tr>'))会返回table而不是tr

因此从技术上讲，您尝试将td附加到table 无效。即：您当前的代码相当于

$("#listDB").append($('<td>', {

解决方案：您需要将td附加到tr，现在您的代码会附加到table

使用此语法

$("#listDB").append($('<tr>').append($('<td>', {
// -------------------------^^ Notice I removed a ")"

所以你的脚本必须看起来像

$("#listDB").append($('<tr>').append($('<td>', {
        class   : "catHead",
        colspan : 11,
        text    : this.category
    })));  // added one more ")"

为避免混淆，让我们尝试使用变量。

 var $tr = $('<tr>');
 $tr.append($('<td>', {
            class   : "catHead",
            colspan : 11,
            text    : this.category
        }));
 $("#listDB").append($tr);