Question

我手动创建了一个静态table的示例对象。但是如何通过动态使用jQuery创建相同的表？如何为此编写逻辑？我对此一无所知。

＆＃13;

var data = {
  parent1: "p1c data",
  parent2: {
    p2_child1: "p2c data1",
    p2_child1: "p2c data2"
  },
  parent3: {
    p2_child1: "p3c data1",
    p2_child2: "p3c data2",
    p2_child3: {
      p2_c2_1: "p2_c21 data1",
      p2_c2_2: "p2_c21 data2"
    }
  }
}

＆＃13;

table{
  border: 1px solid gray;
  width: 100%;
  border-spacing: 0;
  border-bottom:0;
}

td,th{
  border-right:1px solid green;
  border-bottom:1px solid green;
}
td:last-child,th:last-child{
  border-right:0;
}

.center{
  text-align:center;
}

＆＃13;

<h1>Sample static table to be generated by dynamic </h1>
<table>
  <tr>
    <th>parent1</th>
    <th colspan="2">parent2</th>
    <th colspan="4">parent3</th>
  </tr>
  <tr>
    <td>data1</td>
    <td>p2c data1</td>
    <td>p2c data2</td>
    <td>p3c data1</td>
    <td>p3c data2</td>
    <td colspan="2" class="center">p2_child3</td>
  </tr>
  <tr>
    <td colspan="5"></td>
    <td>p2_c21 data1</td>
    <td>p2_c21 data2</td>
  </tr>
</table>

＆＃13;

Answer 1

我将构建此JSON，以便在此示例中所有元素都具有name和content个键。你可以随意打电话给他们。然后，如果元素有子元素，那么它将具有children键，其结构与其父元素完全相同。为了构建表，最简单的方法是使用递归。如果没有子节点，下面的示例将返回一个包含元素content的表格单元格，如果有子节点，则返回元素的name后面的子节点。它看起来与您的示例相似，所以我希望这有用

以下是运行来自您的示例的修改数据的代码：

Javascript的main.js：

var data = [
  {
    "name": "parent1name",
    "content": "parent1data",
    "children": [
      {
        "name": "child1name",
        "content": "parent1child1data"
      }
    ]
  },
  {
    "name": "parent2name",
    "content": "parent2data",
    "children": [
      {
        "name": "child1name",
        "content": "parent2child1data"
      },
      {
        "name": "child2name",
        "content": "parent2child2data"
      }
    ]
  },
  {
    "name": "parent3name",
    "content": "parent3data",
    "children": [
      {
        "name": "child1name",
        "content": "parent3child1data"
      },
      {
        "name": "child2name",
        "content": "parent3child2data"
      },
      {
        "name": "child3name",
        "content": "parent3child3data",
        "children": [
          {
            "name": "child1name",
            "content": "parent3child3grandchild1data"
          },
          {
            "name": "child2name",
            "content": "parent3child3grandchild2data"
          }
        ]
      }
    ]
  }
];

var root = document.getElementById('root');
var table = document.createElement('table');

var tableCells = table.insertRow();

var returnAllContent = function(item, currentRow) {
  item.map(function(element) {
    var td = currentRow.insertCell();
    if (!element.children) {
      td.innerHTML = element.content;
    }
    else {
      var insideTable = document.createElement('table');
      var tr1 = insideTable.insertRow();
      var td1 = tr1.insertCell();
      td1.innerHTML = element.name;
      tr2 = insideTable.insertRow();
      returnAllContent(element.children, tr2);
      td.appendChild(insideTable);
    }
  });
}

returnAllContent(data, tableCells);

root.appendChild(table);

HTML：

<html>
  <head>
    <title>Building table</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div id="root"></div>
    <script src="main.js"></script>
  </body>
</html>

CSS：

html,
body {
  padding: 0;
  margin: 0;
}
#root {
  width: 90%;
  margin: 50px auto;
}
table {
  width: 100%;
  display: block;
  padding: 0;
  border-collapse: collapse;
  border: 1px solid black;
}
tbody {
  display: flex;
  flex-direction: column;
}
tr {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 0 auto;
}
td {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  text-align: center;
  word-wrap: break-word;
  border: 1px solid black;
  margin: 10px;
}
td table {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid transparent;
}

使用jQuery中的Object标签和值创建动态表？

1 个答案: