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.

Dhiarj Sharma · Accepted Answer · 2017-04-11 19:08:48Z

3

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>

answered Apr 11, 2017 at 19:08

Dhiarj Sharma

3503 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2963176 Over a year ago

Thanks for answering, i will use @TypedSource answer cause it was just replacing one line but thanks anyway :)

Tigerrrrr Over a year ago

This is "prepending", not appending.

Neil · Accepted Answer · 2017-04-11 19:32:40Z

1

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>

answered Apr 11, 2017 at 19:32

Neil

14.3k3 gold badges35 silver badges53 bronze badges

Comments

TypedSource · Accepted Answer · 2017-04-11 19:34:52Z

$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.

Thank you very much.. i knew it has to be something simple.. much appreciated :)

Collectives™ on Stack Overflow

Appending rows to a table in Javascript

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related