Appending rows to a table in Javascript
Question
I'm trying to populate a table with some rows everything works good except that only the last row inside the array is actually appended. I really have no idea why. I already printed the array and everything is how it should be.
$table_body = $('#tbody');
$table_row = $('<tr><td style="text-align: center" class="nome"></td><td style="text-align: center" class="email"></td></td><td style="text-align: center" class="confirmado"></td></td><td style="text-align: center" class="dataCandidatura"></td><td class="btn" style="text-align: center"></td></tr>');
for (i in data)
{
var future_field = data[i];
console.log(future_field);
$table_row.find('.nome').html(future_field.nome);
$table_row.find('.email').html(future_field.email);
$table_row.find('.confirmado').html(future_field.confirmed);
$table_row.find('.dataCandidatura').html(future_field.created_at);
// Appending table row to tbody
$table_body.append($table_row);
}
If anyone has some clue I would appreciate it.
3 answers
solution1
1 2017-04-11 19:08:48
try it
<!DOCTYPE html> <html> <head> <style> table, td { border: 1px solid black; } </style> </head> <body> <p>Click the button to add a new row at the first position of the table and then add cells and content.</p> <table id="myTable"> <tr> <td>Row1 cell1</td> <td>Row1 cell2</td> </tr> <tr> <td>Row2 cell1</td> <td>Row2 cell2</td> </tr> <tr> <td>Row3 cell1</td> <td>Row3 cell2</td> </tr> </table> <br> <button onclick="myFunction()">Try it</button> <script> function myFunction() { var table = document.getElementById("myTable"); var row = table.insertRow(0); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); cell1.innerHTML = "NEW CELL1"; cell2.innerHTML = "NEW CELL2"; } </script> </body> </html>
solution2
1 2017-04-11 19:32:40
You can add celsl in jQuery by using the .appendTo function.
$table_body = $('#tbody'); $("#addCells").click(function (){ row = $("<tr>").appendTo($table_body); $("<td>").html("Content").appendTo(row).clone().appendTo(row); });
td { text-align:center; border:1px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="addCells">Add Cells</button> <table> <thead> <tr> <td>Header1</td> <td>Header2</td> </tr> </thead> <tbody id="tbody"> <tr> <td>Initial</td> <td>Initial</td> </tr> </tbody> </table>
solution3
1 2017-04-11 19:34:52
$table_body = $('#tbody');
for (i in data) {
$table_row = $('<tr><td style="text-align: center" class="nome"></td><td style="text-align: center" class="email"></td></td><td style="text-align: center" class="confirmado"></td></td><td style="text-align: center" class="dataCandidatura"></td><td class="btn" style="text-align: center"></td></tr>');
var future_field = data[i];
console.log(future_field);
$table_row.find('.nome').html(future_field.nome);
$table_row.find('.email').html(future_field.email);
$table_row.find('.confirmado').html(future_field.confirmed);
$table_row.find('.dataCandidatura').html(future_field.created_at);
// Appending table row to tbody
$table_body.append($table_row);
}
}
you have to build a new object in every loop instance. objects are called by reference and not by copy like strings.
$table_body = $('#tbody');
$template = $('<tr><td style="text-align: center" class="nome"></td><td style="text-align: center" class="email"></td></td><td style="text-align: center" class="confirmado"></td></td><td style="text-align: center" class="dataCandidatura"></td><td class="btn" style="text-align: center"></td></tr>');
for (i in data) {
var $table_row = $template.clone();
var future_field = data[i];
console.log(future_field);
$table_row.find('.nome').html(future_field.nome);
$table_row.find('.email').html(future_field.email);
$table_row.find('.confirmado').html(future_field.confirmed);
$table_row.find('.dataCandidatura').html(future_field.created_at);
// Appending table row to tbody
$table_body.append($table_row);
}
}
or you make an copy of the jquery object. but take care, it will be copied text based and binded listeners are not copied.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Appending rows to table using loop ( Javascript )
DOCX Javascript Library Appending Table Rows
appending rows into a table
How to reduce delay while appending rows in table with javascript loop
Appending rows into table using JQuery
React is not appending rows to table body
appending table to current page with javascript
Appending row to html table with javascript
I am appending rows to a table and populating with data from an API using javascript, can I get table to refresh the rows every minute
Appending Font Awesome to table in Javascript
Related Tags