javascript - 当使用 jqueryeach 将 tr 附加到表 thead 时，结果是空白行

Question

这个问题已经有答案了:

Appending tr to thead using jQuery results blank table rows (1 个回答)

已关闭 5 年前。

我正在尝试创建thead与 tr ，来自 json 对象数组。这是必需的，因为 jQuery 数据表需要它。

我有以下脚本来执行此操作，但使用空白值创建 tr。

$(function() {

    var json = {
        "Number": "10031",
        "Description": "Solid Parts",
        "Factory": "Factory1",
        "LocationIn": "OutRack",
        "Quantity": 18
    }

    var parsed = $.parseJSON(JSON.stringify(json));
    console.log(parsed);

    var $thead = $('#tableId').find('thead');
    $.each(parsed, function(name, value) {

        $thead.append('<tr>' + name + '</tr>');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableId" class="table table-condensed responsive">
    <thead>
    </thead>
    <tbody>

    </tbody>
</table>

我需要使用数组名称创建一个表。示例:

<table id="tableId" class="table table-condensed responsive">
<thead>
<tr>Number</tr>
<tr>Description</tr>
<tr>Factory</tr>
<tr>LocationIn</tr>
<tr>Quantity</tr>
</thead>
<tbody>

</tbody>
</table>

Answer 1

您不能直接为TR标签添加值，

您应该添加 tr，然后将列值附加到 TR 内，

尝试如下所示的操作。

$(function() {

    var json = {
        "Number": "10031",
        "Description": "Solid Parts",
        "Factory": "Factory1",
        "LocationIn": "OutRack",
        "Quantity": 18
    }

    var parsed =  $.parseJSON(JSON.stringify(json));
    console.log(parsed);

    var $thead = $('#tableId').find('thead');
    var tr = $("<tr>");
    $thead.append(tr);
    $.each(parsed, function(name, value) {

        $(tr).append('<th>' + name + '</th>');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableId" class="table table-condensed responsive" border="1">
    <thead>
    </thead>
    <tbody>

    </tbody>
</table>