Populate Tabelle aus Array mit JQuery

Question

Mar 28, 2015, 10:27 PM

Populate Tabelle aus Array mit JQuery

Ich habe ein Array von 16 Elementen, die ich eine Tabelle füllen möchte. Ich möchte, dass es 2 Zeilen mit 8 Zellen in jeder Zeile hat, die mit dem Array gefüllt ist. Mein Problem ist, dass wenn die Tabelle gefüllt ist, die Tabelle alle Elemente in einer Zeile füllt. Ich habe nicht viel Erfahrung mit JQuery und ich möchte versuchen, dies zum Laufen zu bringen. Jede Hilfe wird geschätzt! Hier ist mein Code:

//**********Javascript & JQuery**********
var array = [1,2,3,4,5,6,7,8,1,2,3,4,5,6,7,8];
var count = 0;
var totalCells = 8;

function writeTable() {
    var $table = $('#summaryOfResults');

    //Array always includes enough elements to fill an entire row, which is 8 cells. Outer loop determines how many rows to make.
    //Inner loop determines the elements to print in the cells for that row.
    for (var i = 0; i < array.length / 8; i++) {
        $table.find('#body').append('<tr>');
        for (var j = 0; j < totalCells; j++) {
            $table.append('<td>' + array[count] + '</td>');
            count++;
        }
        $table.append('</tr>');
    }
}

//**********HTML**********
<html>
<head>
</head>
<body>
<div id="resultsTable">
    <table id='summaryOfResults' border='1'>
        <tbody id="body">
            <tr>
                <th>#</th>
                <th>n<sub>i</sub></th>
                <th>n<sub>f</sub></th>
                <th>E<sub>i</sub> (J)</th>
                <th>E<sub>f</sub> (J)</th>
                <th>&Delta;E (J)</th>
                <th>&Delta;E (kJ/mol)</th>
                <th>&lambda; (nm)</th>
            </tr>
        </tbody>
    </table>
</div>
<div id="tableButtons">
    <button id='copyButton' onclick=''>Copy Table</button>
    <button id='clear' onclick='clearTable();'>Clear Table</button>
    <button id='write' onclick='writeTable();'>Write Table</button>
</div>
</body>
</html>