Erstellen einer dynamischen Tabelle mit Objektbezeichnungen und -werten in jQuery?

Ich habe ein Beispielobjekt mit statischen table manuell ich erstellt. Aber wie kann ich die gleiche Tabelle mit jQuery by dynamic erstellen? Wie schreibe ich die Logik dafür? Ich habe keine Ahnung davon.Erstellen einer dynamischen Tabelle mit Objektbezeichnungen und -werten in 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>

Quelle

2017-06-06 3gwebtrain

Wie generieren Sie das JSON-Objekt? – Gugan

entweder vom Back-End oder manuell. – 3gwebtrain

Ist das ' data1' gemeint in Ihrem HTML? – sudo

Ich würde dieses JSON bauen, so dass alle Elemente name und content Tasten in diesem Beispiel haben. Du kannst sie nennen, was immer du willst. Und dann, wenn das Element Kinder haben würde, hätte es children Schlüssel mit genau der gleichen Struktur wie ihre Eltern innerhalb. Um daraus die Tabelle zu erstellen, wäre es am einfachsten, Rekursion zu verwenden. Das folgende Beispiel gibt eine Tabellenzelle mit dem Element content des Elements zurück, wenn keine untergeordneten Elemente vorhanden sind, oder es gibt das Element name zurück, das von seinen untergeordneten Elementen gefolgt wird, wenn untergeordnete Elemente vorhanden sind. Es sieht für Ihr Beispiel ähnlich, so dass ich hoffe, dass dies hilfreich ist

Hier ist der Code auf modifizierten Daten von Ihrem Beispiel ausgeführt wird:

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

Quelle

2017-06-30 15:09:27

Erstellen einer dynamischen Tabelle mit Objektbezeichnungen und -werten in jQuery?

Antwort

Verwandte Themen