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

我手动创建了一个带有静态table的示例对象。但我怎样才能创建使用jQuery动态相同的表？如何编写这个逻辑？我对此没有任何想法。使用jQuery中的对象标签和值创建动态表？

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

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

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

来源

2017-06-06 3gwebtrain

如何生成json对象？ – Gugan

通过从后端或手动获取它。 – 3gwebtrain

这是'data1'意味着在你的html？ – sudo

我建立这个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; 
}

来源

2017-06-30 15:09:27

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

回答

相关问题