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

要素のすべてが、この例ではnameとcontentキーを持っているように、私は、このJSONを構築します。あなたはあなたが望むものであれ、それらを呼び出すことができます。要素に子がある場合は、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でオブジェクトのラベルと値を使用して動的テーブルを作成していますか？

答えて

関連する問題