使用jQuery结果将tr附加到thead空白表行 [英] Appending tr to thead using jQuery results blank table rows

问题描述

我正在尝试从 JSON 对象数组创建带有 tr 的 thead.这是必需的，因为 jQuery 数据表需要它.

I am trying to create thead with tr, from JSON object array. This is required as it's needed by jQuery datatable.

我有以下脚本来做到这一点，但创建了带有空白值的 tr.

I have following script to do that, but creates tr with blank values.

$(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>

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

I need a table to be created with array name. Example:

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

推荐答案

在 thead 中的 tr 内...通常(有点讽刺)，你需要一些 th 来显示文本.

Within a tr in thead... Ususally (that is sarcastic a bit), you need some th to display text.

$(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>");
    $.each(parsed, function(name, value) {
        $tr.append('<th>' + name + '</th>');
    });
    $thead.append($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>

这篇关于使用jQuery结果将tr附加到thead空白表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！