Building table with innerHTML
first you cant select DOM element just by typing its id!
you will need to use document.getElementById to get you element.
then you can start to add text to its inner html as you were doing but you have to use +=
in the first time to not replace you heading elements.
your js will be:
var itemList = [
{'item': '1', 'price' : '100'},
{'item': '2', 'price' : '200'},
{'item': '3', 'price' : '300'},
{'item': '4', 'price' : '400'},
{'item': '5', 'price' : '500'}
]
//Add items to shopping table
items_table = document.getElementById('items_table');
for(var ctr = 0; ctr < 5; ctr++)
{
items_table.innerHTML+= '<tr><td>' + itemList[ctr].item + '</td><td>' + itemList[ctr].price + '.00' + '</td></tr>';
}
here's a Demo example for this
OR
you can use insertRow() and insertCell() methods
innerHTML doesn't generate tr and td properly
You have to do it in one go:
var req = { responseText : '[{"nome":"name","celular":"1233456"},{"nome":"name","celular":"1233456"}]'}var turma = "x";alunos = JSON.parse(req.responseText);var html= "<div class='table-responsive'>" + "<table class='table table-striped table-hover table-condensed table-order'>" + "<thead>" + "<tr>" + "<th>Aluno</th>" + "<th>Celular</th>" + "<th>Turma</th>" + "<th>Status</th>" + "</tr>" + "</thead>""<tbody>";for (i = 0; i < alunos.length; i++) { html += "<tr>" + "<td>" + alunos[i].nome + "</td>" + "<td>" + alunos[i].celular + "</td>" + "<td>" + turma + "</td>" + "<td>Status</td>" + "</tr>";
}document.getElementById("tableModal").innerHTML += html+"</tbody></table></div>";
<div class="modal fade" id="modalMsg" role="dialog"> <div class="modal-dialog modal-lg">
<!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title" id="tituloModal"></h4> </div> <div class="modal-body"> <div id="tableModal"></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button> </div> </div>
</div></div>
How to Get InnerHTML for Table Cell instead of an object or NaN
Since you are OK to use jquery,
var dataStr = "";$('#tblData > tbody').each(function(e) { dataStr += $(this).text();});console.log(dataStr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><table id="tblData" class="table table-hover"> <thead> <tr> <th>Date</th> <th>Time</th> <th>Treatment Number</th> <th>Cell Number</th> <th>Waste Container Number</th> </tr> </thead> <tbody> <tr> <td>10101</td> <td>20202</td> <td>30303</td> <td>40404</td> <td>50505</td> </tr> <tr> <td>wowowo</td> <td>sksksk</td> <td>alalal</td> <td>qpqpqp</td> <td>zmzmzm</td> </tr> </tbody></table>
Draw Table Using HTML and JavaScript
The problem was with how I appended the text. Instead of cell.appendChild(text);
, it should have been cell.textContext = text;
.
Here is the final code
// Initializes Parse (Purposely Omitted)
// Defines Parse Object Array
var object = {};
// Defines Data Query
var query = new Parse.Query("_User");
query.find ({
success: function(results) {
// Creates Table in Document
var table = document.createElement("table");
var row = table.insertRow(0);
// Sets Table Attributes
table.setAttribute("border", "1");
table.setAttribute("width", "100%");
// Loops Through Query
for(var i = 0; i < results.length; i = i + 1) {
// Stores Results
var object = results[i];
var text = object.get("firstName") + " " + object.get("lastName");
var cell = row.insertCell(i);
cell.setAttribute("align", "center");
cell.textContent = text;
}
document.getElementById("main").appendChild(table);
},
failure: function(error) {
alert("Something Went Wrong");
}
});
Related Topics
How to Open a File Browser with Default Directory in JavaScript
Animated Gif Only Loops Once in Chrome and Firefox
How to Toggle Class Using Pure JavaScript in HTML
Why Are CSS Animations and Transitions Blocked by JavaScript
Working Twitter-Typeahead Example
Rendering Raw HTML with Reactjs
No 'Access-Control-Allow-Origin' Header Is Present on the Requested Resource Error
Jquery - Multiple $(Document).Ready ...
Difference Between Defer().Promise and Promise
Addeventlistener with Ajax Not Working Well
Position Fixed Not Working in Mobile Browser
How to Inject a Style with an "!Important" Rule
Why Browser Is Returning Empty String on Style.Height ? How to Get Actual Height of an Element
Regex Match Count of Characters That Are Separated by Non-Matching Characters