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.
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;
}
}
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];
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()
.
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.