Question

68

Populate table from array using JQuery

rated 0 times [ 72] [ 4] / answers: 1 / hits: 30783 / 9 Years ago, sat, march 28, 2015, 12:00:00

I have an array of 16 elements that I want to fill a table. I want it to have 2 rows with 8 cells in each row which is filled with the array. My problem is that when the table is populated, the table populates all elements into one row. I have not had much experience with JQuery and I want to try to get this to work. Any help is appreciated! Here is my 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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

leandraannabellar

Add To Favorites

Follow

Total Points: 255

Total Questions: 89

Total Answers: 89

Location: England

Member since Sun, May 21, 2023

1 Year ago

answered 9 Years ago lucianom · Accepted Answer

First, you have to reset count on every click.

Next, you have to specify where exactly the <td> elements have to be appended to. As for now, you're appending them directly to the <table> :

// your declaration of the table element:

var $table = $('#summaryOfResults');

// ...

// then in nested loop, you're appending the cells directly to the table:

$table.append('<td>' + array[count] + '</td>');

The last thing - .append('</tr>') is not a proper way to create an element object, it should be '<tr/>' , or '<tr></tr>'.

This should be what you're looking for:

function writeTable() {

    // cache <tbody> element:

    var tbody = $('#body');

    for (var i = 0; i < array.length / 8; i++) {

        // create an <tr> element, append it to the <tbody> and cache it as a variable:

        var tr = $('<tr/>').appendTo(tbody);

        for (var j = 0; j < totalCells; j++) {

            // append <td> elements to previously created <tr> element:

            tr.append('<td>' + array[count] + '</td>');

            count++;

        }

    }

    // reset the count:

    count = 0;

}

JSFiddle

Alternatively, make a HTML string and append it to the table outside of the loop:

function writeTable() {

    // declare html variable (a string holder):

    var html = '';

    for (var i = 0; i < array.length / 8; i++) {

        // add opening <tr> tag to the string:

        html += '<tr>';

        for (var j = 0; j < totalCells; j++) {

            // add <td> elements to the string:

            html += '<td>' + array[count] + '</td>';

            count++;

        }

        // add closing </tr> tag to the string:

        html += '</tr>';

    }

    //append created html to the table body:

    $('#body').append(html);

    // reset the count:

    count = 0;

}

JSFiddle