Rellenar tabla desde matriz utilizando JQuery

Question

Mar 28, 2015, 10:27 PM

Rellenar tabla desde matriz utilizando JQuery

Tengo una matriz de 16 elementos que quiero llenar una tabla. Quiero que tenga 2 filas con 8 celdas en cada fila que se llena con la matriz. Mi problema es que cuando se llena la tabla, la tabla llena todos los elementos en una fila. No he tenido mucha experiencia con JQuery y quiero intentar que esto funcione. Cualquier ayuda es apreciada! Aquí está mi código:

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