使用jQuery将tr附加到thead结果空白表行

时间:2018-07-20 03:05:48

标签: javascript jquery html datatables

我正在尝试根据JSON对象数组使用thead创建tr。这是必需的,因为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>

1 个答案:

答案 0 :(得分:2)

tr中的thead中...通常(有点讽刺),您需要一些th来显示文本。

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