Html:Draw Table Using Innerhtml

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



Leave a reply



Submit