how can I insert the row in html table dynamically

Question

I am trying to insert a row dynamically in my table, but I have no luck to achieve this.

In my ajax success this is how I insert the table row

$('#mytable').find('tbody').append(data);

HTML:

<table  class="display" id="mytable" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>#</th>
      <th>FIRST NAME</th>
      <th>LAST NAME</th>
      <th>ADDRESS</th>
      <th>AGE</th>
    </tr>
  </thead>
  <tbody>
    // I want to insert here.
  </tbody>
</table>

This is the data that is being returned.

<tr class="myclass">
  <td style="text-align: center;">1</td>
  <td>Jack</td>
  <td>Miller</td>
  <td>California</td>
  <td>24</td>    
</tr>
<tr class="myclass">
  <td style="text-align: center;">2</td>
  <td>Miguel</td>
  <td>Park</td>
  <td>London</td>
  <td>64</td>     
</tr>

Thank you in advance.

@ashTon what does your API return? The data that you are appending should either be a html string or an element ( can also be collection of either) — Lander Van Breda
– Lander Van Breda, Commented Oct 30, 2014 at 3:15
//loop{ $.each loop $('#mytable').find('tbody').append("<tr><td>"+"data"+"</td></tr>"); //} — Suraj Rawat
– Suraj Rawat, Commented Oct 30, 2014 at 3:27
You need to open your console, preferably in FF or chrome (hit f12) and check the status of your ajax call. I think your issue lies with that. As it stands your code works with a string: jsfiddle.net/ektnku0h — scrappedcola
– scrappedcola, Commented Oct 30, 2014 at 3:33

Suraj Rawat · Accepted Answer · 2014-10-30 13:45:50Z

1

use a each loop and append the data with HTML via append method

  $.each(data,function(value,index){}{

     $('#mytable').find('tbody').append("<tr><td>"+value+"</td></tr>"); 

  });{

answered Oct 30, 2014 at 13:45

Suraj Rawat

3,76325 silver badges33 bronze badges

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

Comments

Anju · Accepted Answer · 2016-08-23 08:08:33Z

It will add the row dynamically..

<!DOCTYPE html>
    <html>
    <head>
    <style>
    table, td {
        border: 1px solid black;
    }
    </style>
    </head>
    <body> 
<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()">Add row</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>

Collectives™ on Stack Overflow

how can I insert the row in html table dynamically

2 Answers 2

use a each loop and append the data with HTML via append method

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

use a each loop and append the data with HTML via append method

Comments

Comments

Related