Sunday, May 12, 2024
 Popular · Latest · Hot · Upcoming
2
rated 0 times [  5] [ 3]  / answers: 1 / hits: 71704  / 11 Years ago, thu, december 5, 2013, 12:00:00

I need your help,



For some reason, I can't get the data captured in my array to populate into the TD cells of my dynamically generated table:



<!DOCTYPE html>
<html>
<head>
<script type=text/javascript>
function addTable() {

var myTableDiv = document.getElementById(metric_results)
var table = document.createElement('TABLE')
var tableBody = document.createElement('TBODY')

table.border = '1'
table.appendChild(tableBody);

var heading = new Array();
heading[0] = Request Type
heading[1] = Group A
heading[2] = Groub B
heading[3] = Group C
heading[4] = Total

var stock = new Array()
stock[0] = new Array(Cars, 88.625, 85.50, 85.81, 987)
stock[1] = new Array(Veggies, 88.625, 85.50, 85.81, 988)
stock[2] = new Array(Colors, 88.625, 85.50, 85.81, 989)
stock[3] = new Array(Numbers, 88.625, 85.50, 85.81, 990)
stock[4] = new Array(Requests, 88.625, 85.50, 85.81, 991)

//TABLE COLUMNS
var tr = document.createElement('TR');
tableBody.appendChild(tr);
for (i = 0; i < heading.length; i++) {
var th = document.createElement('TH')
th.width = '75';
th.appendChild(document.createTextNode(heading[i]));
tr.appendChild(th);

}

//TABLE ROWS
var tr = document.createElement('TR');
tableBody.appendChild(tr);

for (i = 0; i < stock.length; i++) {
for (j = 0; j < stock[i].length; j++) {
var td = document.createElement('TD')
td.appendChild(document.createTextNode(stock[i][j]));
td.appendChild(td)
}
}

myTableDiv.appendChild(table)

}
</script>
</head>

<div id=metric_results>
<input type=button id=create value=Click here onclick=Javascript:addTable()>
</div>

</body>
</html>

More From » dom

 Answers
58

Change:



var tr = document.createElement('TR'); // this should be inside the first loop
tableBody.appendChild(tr); // this should be just before the first loop is over

for (i=0; i<stock.length; i++) {
for (j=0; j<stock[i].length; j++) {
var td = document.createElement('TD')
td.appendChild(document.createTextNode(stock[i][j]));
td.appendChild(td) // this should be tr.appendChild(td)
}
}


to this:



for (i = 0; i < stock.length; i++) {
var tr = document.createElement('TR');
for (j = 0; j < stock[i].length; j++) {
var td = document.createElement('TD')
td.appendChild(document.createTextNode(stock[i][j]));
tr.appendChild(td)
}
tableBody.appendChild(tr);
}


Fiddle


[#73889] Wednesday, December 4, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
kerryoliviaa

Total Points: 221
Total Questions: 102
Total Answers: 117

Location: Sint Maarten
Member since Tue, Mar 29, 2022
2 Years ago
;