Displaying HTML table content dynamically
Question
There is an issue that I could not figure out in this code. It should iterate of the array objects and display them in an HTML table. The third row should contain buttons. Why it does not show me anything?
HTML code:
<html>
<head>
</head>
<body>
<div id="wrapper">
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
<tr>
<th>Name</th>
<th>Level</th>
<th>Action</th>
</tr>
<tr id="table-rows">
<td><input type="text" id="new_name"></td>
<td>
<select name="levels-list" id="levels-list">
<option value="A" id="option-1">A</option>
<option value="B" id="option-2">B</option>
<option value="C" id="option-3">C</option>
</select>
</td>
<td><input type="button" class="add" value="Add Row" id="add-button"></td>
</tr>
</table>
</div>
<script type="text/javascript" src="myscript.js"></script>
</body>
</html>
Javascript:
var myArray = [{"name":"aaa","level":"A"},{"name":"bbb","level":"B"},{"name":"ccc","level":"C"}];
display();
function display() {
var length = myArray.length;
var htmltext = "";
for (var i = 1; i < length; i++) {
htmltext +=
"<tr id='row"+i+"'>\
<td>"+myArray[i].name+"</td>\
<td>"+myArray[i].level+"</td>\
<td>\
<input type='button' id='edit_button"+i+"' value='Edit' class='edit' onclick='edit_row("+i+")'> \
<input type='button' id='save_button"+i+"' value='Save' class='save' onclick='save_row("+i+")'> \
<input type='button' value='Delete' class='delete' onclick='delete_row("+i+")'>\
</td>\
</tr>";
}
document.getElementById("table-rows").innerHTML = htmltext;
}
3 answers
solution1
0 2017-05-26 16:37:26
Instead of
document.getElementById("table-rows").innerHTML = htmltext;
Try to
document.getElementById("table-rows").append(htmltext);
solution2
0 ACCPTED 2017-05-26 16:39:31
You need to reference the table body with an ID, and also, your for loop should init i at 0, so you can traverse the whole array.
var myArray = [{ "name": "aaa", "level": "A" }, { "name": "bbb", "level": "B" }, { "name": "ccc", "level": "C" }]; display(); function display() { var length = myArray.length; var htmltext = ""; for (var i = 0; i < length; i++) { htmltext += "<tr id='row" + i + "'>\\ <td>" + myArray[i].name + "</td>\\ <td>" + myArray[i].level + "</td>\\ <td>\\ <input type='button' id='edit_button" + i + "' value='Edit' class='edit' onclick='edit_row(" + i + ")'> \\ <input type='button' id='save_button" + i + "' value='Save' class='save' onclick='save_row(" + i + ")'> \\ <input type='button' value='Delete' class='delete' onclick='delete_row(" + i + ")'>\\ </td>\\ </tr>"; } document.getElementById("table-rows").innerHTML = htmltext; }
<html> <head> </head> <body> <div id="wrapper"> <table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1> <thead> <tr> <th>Name</th> <th>Level</th> <th>Action</th> </tr> </thead> <tbody id="table-rows"> <tr> <td><input type="text" id="new_name"></td> <td> <select name="levels-list" id="levels-list"> <option value="A" id="option-1">A</option> <option value="B" id="option-2">B</option> <option value="C" id="option-3">C</option> </select> </td> <td><input type="button" class="add" value="Add Row" id="add-button"></td> </tr> </tbody> </table> </div> </body> </html>
solution3
-2 2017-05-26 16:49:46
Use handlebars. http://handlebarsjs.com/ I use it for dynamic tables myself. Plus its bad practice to insert html with js.
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
jquery content not displaying in html table
Displaying an image dynamically in a html table in JavaScript
Create an HTML table with dynamically changing content
Dynamically alter html table cell content using php
How to change the table content dynamically in html using js
How to dynamically change HTML table content using JavaScript
HTML table not displaying
displaying html table with javascript
Displaying winner in HTML table
Displaying File in HTML table
Related Tags