使用Javascript

时间:2018-01-08 14:06:19

标签: javascript html json html-table

我想把一些JSON放到一个表中,但是dict中的一个项目应该放在顶部的一个单独的表中。

{
"test": {
  "col1": 1, "col2": 2, "col3": 3, "col4": 4, "col5": 5
  },
"test2": {
  "col1": 1, "col2": 2, "col3": 3, "col4": 4, "col5": 5
  }
}

我想循环遍历测试字典并从彼此之下解析它们,如下所示:

https://imgur.com/a/JcARE

我让它适用于1/2/3/4/5表,但我也无法将代码中的上一行放在...中:

$(function() {
  var tbody = $("<tbody />"),
    tr;
  $.each(trades, function(_, obj) {
    tr = $("<tr />");
    $.each(obj, function(_, text) {
      tr.append("<td>" + text + "</td>")
    });
    tr.appendTo(tbody);
  });
  tbody.appendTo("#trades_table");

})
<table class="table" id="trades_table">
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
    </tr>
  </thead>
</table>

2 个答案:

答案 0 :(得分:0)

您需要做的就是row colspan 5 var trades={ "test": { "col1": 1, "col2": 2, "col3": 3, "col4": 4, "col5": 5 }, "test2": { "col1": 1, "col2": 2, "col3": 3, "col4": 4, "col5": 5 } }; $(function() { var tbody = $("<tbody />"), tr; $.each(trades, function(_, obj) { tr = $("<tr />"); tr.append("<td colspan='5' align='center'>" + _ + "</td>") tr.appendTo(tbody); tr = $("<tr />"); $.each(obj, function(_, text) { tr.append("<td>" + text + "</td>") }); tr.appendTo(tbody); }); tbody.appendTo("#trades_table"); })附加文本作为键值,然后迭代数组:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="trades_table"  border="1">
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
    </tr>
  </thead>
</table>
col3

已更新,以var trades={ "test": { "col1": 1, "col2": 2, "col3": 3, "col4": 4, "col5": 5 }, "test2": { "col1": 1, "col2": 2, "col3": 3, "col4": 4, "col5": 5 } }; $(function() { var tbody = $("<tbody />"), tr; $.each(trades, function(_, obj) { tr = $("<tr />"); tr.append("<td colspan='5' align='center'>" + obj['col3'] + "</td>") tr.appendTo(tbody); tr = $("<tr />"); $.each(obj, function(_, text) { tr.append("<td>" + text + "</td>") }); tr.appendTo(tbody); }); tbody.appendTo("#trades_table"); })作为标题

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="trades_table"  border="1">
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
    </tr>
  </thead>
</table>
CREATE OR REPLACE PROCEDURE myProc
(
    i_FirstName varchar2(20), -- alternatively use People.FirstName%type instead of varchar2(20)
    i_LastName varchar(20),
    o_PersonId out People.PersonId%type,
    o_Address  out People.Address%type,
) AS
BEGIN
    SELECT p.PersonId, p.Address
      INTO o_PersonId, o_Address
      FROM People p
     WHERE p.FirstName = i_FirstName
       AND p.LastName = i_LastName;
END;

答案 1 :(得分:0)

您可以简单地遍历JSON并为每次出现创建一个新表。您可以使用table{ width: 200px; margin-bottom: 20px; } td,th{ text-align: center; }找到列数:

&#13;
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
&#13;
{{1}}
&#13;
{{1}}
&#13;
&#13;
&#13;