Preencher tabela da matriz usando JQuery

Question

Mar 28, 2015, 10:27 PM

Preencher tabela da matriz usando JQuery

Eu tenho uma matriz de 16 elementos que eu quero preencher uma tabela. Eu quero que ele tenha 2 linhas com 8 células em cada linha que é preenchida com a matriz. Meu problema é que, quando a tabela é preenchida, ela preenche todos os elementos em uma linha. Não tenho muita experiência com o JQuery e quero tentar fazer com que isso funcione. Qualquer ajuda é apreciada! Aqui está o meu 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>