Populate table from array using JQuery
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;
}
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;
}
user3786596
Updated on July 05, 2022Comments
-
user3786596 almost 2 years
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>ΔE (J)</th> <th>ΔE (kJ/mol)</th> <th>λ (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>
-
user3786596 about 9 yearsThanks for this! I need to learn more about how the append in jquery, not sure why or how the TD elements can be appended to the <tr></tr>. I thought it would have to be between the opening tag and closing tag.