JavaScript function to populate table not working

Question

I have an html table and I'm trying to create n number of rows using pure JavaScript, and populate the table using JSON data (I've created a variable with JSON data in it within the JavaScript code). The problem is, nothing happens when I click the button; the rows don't get created. For testing purposes, I tried adding a <p> element and some JavaScript to alter that element like this:

    document.getElementById("test").innerHTML="TEST";

And that works so I know that there's something wrong with the code that inserts rows and the data.

Here is my code:

function populate() {
  var rows = [{
      "ID": "John",
      "LastName": "Test",
      "DOB": "03-12-1959",
      "Gender": "M"
    },

    {
      "ID": "John",
      "LastName": "Test",
      "DOB": "03-12-1959",
      "Gender": "M"
    }

  ];

  var colNum = rows[0].length;
  var testtable = document.getElementsByClassName("test-table");

  for (var i = 0; i <= rows.length; i++) {
    var testrow = testtable.insertRow();

    for (var j = 0; j <= colNum; j++) {
      var testcells = testrow.insertCell();
      testcells.innerHTML = rows[i][j];
    }
  }
}

<button onclick="populate()">Test</button>
<table class="test-table">
  <thead>
    <tr>
      <th>ID</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>DOB</th>
      <th>Gender</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <label for="row1"></label>123</td>
      <td>John</td>
      <td>Doe</td>
      <td>02-15-1982</td>
      <td>M</td>
    </tr>


    <tr>
      <td colspan="6">
        <input id="row1" type="checkbox">
        <table>
          <tr>
            <th>Phone Number</th>
            <td>555-3226</td>
            <th>City:</th>
            <td>New York</td>
          </tr>
          <tr>
            <th>Hire Date:</th>
            <td>8/13/12</td>
            <th>Salary:</th>
            <td>$48,000</td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>

When I inspect element in the browser (firefox) it tells me that 'insertRow' is not a function.

Is there another way to do this? How can I fix this? Any help would be appreciated.

Thank you all for your great answers

Rebecca
– Rebecca

2015-10-22 21:31:20 +00:00
Commented Oct 22, 2015 at 21:31 — Rebecca
– Rebecca, Commented Oct 22, 2015 at 21:31

Athanasios Emmanouilidis · Accepted Answer · 2015-10-21 21:09:41Z

Here is the fiddle with the solution:

http://jsfiddle.net/7dfwrje7/4/

HTML

     <button onclick="populate()">Test</button>
<table class="test-table">
  <thead>
    <tr>
      <th>ID</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>DOB</th>
      <th>Gender</th>
    </tr>
  </thead>

  <tbody id="data">
    <tr>
      <td><label for="row1"></label>123</td>
      <td>John</td>
      <td>Doe</td>
      <td>02-15-1982</td>
      <td>M</td>
    </tr>


    <tr>
      <td colspan="6">
        <input id="row1" type="checkbox">
        <table>
          <tr>
            <th>Phone Number</th>
            <td>555-3226</td>
            <th>City:</th>
            <td>New York</td>
          </tr>
          <tr>
            <th>Hire Date:</th>
            <td>8/13/12</td>
            <th>Salary:</th>
            <td>$48,000</td>
          </tr>
        </table>
      </td>
    </tr>
        </tbody>
      </table>

JS

function populate(){

    var data = [
 {
     "ID" : "2",
     "FirstName" : "John",
     "LastName" : "Test",
     "DOB": "03-12-1959",
     "Gender":"M"
    },

     {
     "ID" : "3",
     "FirstName" : "Helen",
     "LastName" : "Test",
     "DOB": "03-12-1959",
     "Gender":"M"
    }

];

  var tr, td;
  var tbody = document.getElementById("data");

    // loop through data source
    for (var i = 0; i < data.length; i++) {
        tr = tbody.insertRow(tbody.rows.length);
        td = tr.insertCell(tr.cells.length);
        td.setAttribute("align", "center");
        td.innerHTML = data[i].ID;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = data[i].FirstName;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = data[i].LastName;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = data[i].DOB;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = data[i].Gender;

    }

}

Barmar · Accepted Answer · 2015-10-21 20:45:04Z

1

document.getElementsByClassName() returns a collection, not a single element. If you have multiple elements with the class, you need to loop over them; if there's just one, you need to index it:

var testtable = document.getElementsByClassName("test-table")[0];

answered Oct 21, 2015 at 20:45

Barmar

789k57 gold badges554 silver badges669 bronze badges

Comments

Will N · Accepted Answer · 2015-10-21 20:49:38Z

The jfiddle seemed to not like the onclick on the HTML attribute. You can put it in the JS instead, if necessary:

document.getElementById('myButt').onclick = populate;

For your rows JSON object, you are treating it like an array when you should be treating it like a map. You can get the keys of an object then iterate through the keys:

 var colNum  = Object.keys(rows[0]).length;
 var testtable = document.getElementsByClassName("test-table")[0];

 for(var i=0; i <= rows.length; i++){
     var testrow = testtable.insertRow();

     Object.keys(rows[i]).forEach(function (key) {
         var testcells = testrow.insertCell();
         testcells.innerHTML = rows[i][key];
     });
 }
}

I also made the same change as the pre-existing answer, for the call to getElementsByClassName().

Collectives™ on Stack Overflow

JavaScript function to populate table not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related