Shashank
Reputation: 107
Create Table in Javascript using For Loop
Hello Fellow Developers, I am a newbie in Javascript and finding it difficult to create a table in JavaScript using For Loop. It would be great if you would help me out.
I am trying to make a Barclays premier league table using Javascript, for which i have saved data in various variables and using them as the for loop increments.
var teams = ["Arsenal", "Chelsea", "Man City", "Liverpool", "Everton", "Spurs", "Newcastle", "Southampton", "Man Utd", "Aston Villa", "Swansea", "Hull", "West Brom", "Stoke", "Cariff", "Norwich", "West Ham", "Fulham", "Crystal Palace", "Sunderland"];
var played = ["14", "14", "14", "14", "14", "14", "14", "14", "14", "14", "14", "14", "14", "14", "14", "14", "14", "14", "14", "14", ];
var won = ["11", "9", "9", "8", "7", "7", "7", "6", "6", "5", "5", "5", "3", "3", "3", "4", "3", "3", "3", "2"];
var draw = ["1", "3", "1", "3", "6", "3", "2", "4", "4", "4", "3", "2", "6", "5", "5", "2", "4", "1", "1", "2"];
var lost = ["2", "2", "4", "3", "1", "4", "5", "4", "4", "5", "6", "7", "5", "6", "6", "8", "7", "10", "10", "10"];
var goalsScored = ["29", "28", "40", "30", "22", "13", "19", "18", "22", "16", "20", "12", "17", "12", "11", "12", "12", "12", "8", "11"];
var goalsAgainst = ["10", "14", "14", "17", "13", "15", "21", "13", "18", "16", "19", "18", "19", "18", "20", "28", "15", "26", "22", "28"];
var teamImages = ["Images/Teams/1.ico", "Images/Teams/2.ico", "Images/Teams/3.ico", "Images/Teams/4.ico", "Images/Teams/5.ico", "Images/Teams/6.ico", "Images/Teams/7.ico", "Images/Teams/8.ico", "Images/Teams/9.ico", "Images/Teams/10.ico", "Images/Teams/11.ico", "Images/Teams/12.ico", "Images/Teams/13.ico", "Images/Teams/14.ico", "Images/Teams/15.ico", "Images/Teams/16.ico", "Images/Teams/17.ico", "Images/Teams/18.ico", "Images/Teams/19.ico","Images/Teams/20.ico"];
And so far i have developed the following code...
var createTable = document.createElement("table");
createTable.id = "bplTable";
createTable.border = "1";
var createHeaderRow = document.createElement("tr");
createHeaderRow.id = "tableHeader";
var th1 = document.createElement("th");
th1.innerHTML = "Pos";
var th2 = document.createElement("th");
th2.innerHTML = "";
var th3 = document.createElement("th");
th3.innerHTML = "Team";
th3.id = "teamName";
var th4 = document.createElement("th");
th4.innerHTML = "P";
var th5 = document.createElement("th");
th5.innerHTML = "W";
var th6 = document.createElement("th");
th6.innerHTML = "D";
var th7 = document.createElement("th");
th7.innerHTML = "L";
var th8 = document.createElement("th");
th8.innerHTML = "F";
var th9 = document.createElement("th");
th9.innerHTML = "A";
var th10 = document.createElement("th");
th10.innerHTML = "+/-";
var th11 = document.createElement("th");
th11.innerHTML = "Pts";
createHeaderRow.appendChild(th1);
createHeaderRow.appendChild(th2);
createHeaderRow.appendChild(th3);
createHeaderRow.appendChild(th4);
createHeaderRow.appendChild(th5);
createHeaderRow.appendChild(th6);
createHeaderRow.appendChild(th7);
createHeaderRow.appendChild(th8);
createHeaderRow.appendChild(th9);
createHeaderRow.appendChild(th10);
createHeaderRow.appendChild(th11);
for (i = 1; i < 21; i++)
{
var createNewRow = document.createElement("tr");
var td1 = document.createElement("td");
th1.innerHTML = [i];
var td2 = document.createElement("td");
th2.innerHTML = "<img alt="" + teams[i] + "" src="+teamImages[i]+"/>";
var td3 = document.createElement("td");
th3.innerHTML = teams[i];
th3.id = "teamName";
var td4 = document.createElement("td");
th4.innerHTML = played[i];
var td5 = document.createElement("td");
th5.innerHTML = won[i];
var td6 = document.createElement("td");
th6.innerHTML = draw[i];
var td7 = document.createElement("td");
th7.innerHTML = lost[i];
var td8 = document.createElement("td");
th8.innerHTML = goalsScored[i];
var td9 = document.createElement("td");
th9.innerHTML = goalsAgainst[i];
var td10 = document.createElement("td");
th10.innerHTML = goalsScored[i] - goalsAgainst[i];
var td11 = document.createElement("td");
th11.innerHTML = (won[i] * 3) + (draw[i]);
createNewRow.appendChild(td1);
createNewRow.appendChild(td2);
createNewRow.appendChild(td3);
createNewRow.appendChild(td4);
createNewRow.appendChild(td5);
createNewRow.appendChild(td6);
createNewRow.appendChild(td7);
createNewRow.appendChild(td8);
createNewRow.appendChild(td9);
createNewRow.appendChild(td10);
createNewRow.appendChild(td11);
createTable.appendChild(createNewRow);
}
createDiv.appendChild(createTable);
getID("bodyContent").appendChild(createDiv);
I just get the following output
20 "undefined" undefined undefined undefined undefined undefined undefined undefined NaN NaN
I tried debugging it a lot.. but in vain..
Thanks in advance!
Upvotes: 1
Views: 3113
Answers (3)
Sridhar R
Reputation: 20418
Try this way
var teams = ["Arsenal", "Chelsea", "Man City", "Liverpool", "Everton", "Spurs", "Newcastle", "Southampton", "Man Utd", "Aston Villa", "Swansea", "Hull", "West Brom", "Stoke", "Cariff", "Norwich", "West Ham", "Fulham", "Crystal Palace", "Sunderland"];
var played = ["14", "14", "14", "14", "14", "14", "14", "14", "14", "14", "14", "14", "14", "14", "14", "14", "14", "14", "14", "14", ];
var won = ["11", "9", "9", "8", "7", "7", "7", "6", "6", "5", "5", "5", "3", "3", "3", "4", "3", "3", "3", "2"];
var draw = ["1", "3", "1", "3", "6", "3", "2", "4", "4", "4", "3", "2", "6", "5", "5", "2", "4", "1", "1", "2"];
var lost = ["2", "2", "4", "3", "1", "4", "5", "4", "4", "5", "6", "7", "5", "6", "6", "8", "7", "10", "10", "10"];
var goalsScored = ["29", "28", "40", "30", "22", "13", "19", "18", "22", "16", "20", "12", "17", "12", "11", "12", "12", "12", "8", "11"];
var goalsAgainst = ["10", "14", "14", "17", "13", "15", "21", "13", "18", "16", "19", "18", "19", "18", "20", "28", "15", "26", "22", "28"];
var teamImages = ["Images/Teams/1.ico", "Images/Teams/2.ico", "Images/Teams/3.ico", "Images/Teams/4.ico", "Images/Teams/5.ico", "Images/Teams/6.ico",'','','','','','','','','','','','','','']
var output='<table>';
for (var i=0;i<teams.length;i++)
{
output+='<tr><td>'+teams[i]+'</td><td>'+played[i]+'</td><td>'+won[i]+'</td><td>'+draw[i]+'</td><td>'+lost[i]+'</td><td>'+goalsScored[i]+'</td><td>'+goalsAgainst[i]+'</td><td>'+teamImages[i]+'</td></tr>'
}
output+='</table>';
$('body').append(output);
Upvotes: 2
Rhyono
Reputation: 2468
Fixing your code:
You have 20 items in the array, arrays start at 0, which means the last ID is 19. So your for needs to be less than 20, not 21.
Next, everything in the for is making td# vars, but you're trying to change the values of the th# vars.
Finally, you don't have a createDiv variable, which obviously keeps your table from being output.
var teams = ["Arsenal", "Chelsea", "Man City", "Liverpool", "Everton", "Spurs", "Newcastle", "Southampton", "Man Utd", "Aston Villa", "Swansea", "Hull", "West Brom", "Stoke", "Cariff", "Norwich", "West Ham", "Fulham", "Crystal Palace", "Sunderland"];
var played = ["14", "14", "14", "14", "14", "14", "14", "14", "14", "14", "14", "14", "14", "14", "14", "14", "14", "14", "14", "14", ];
var won = ["11", "9", "9", "8", "7", "7", "7", "6", "6", "5", "5", "5", "3", "3", "3", "4", "3", "3", "3", "2"];
var draw = ["1", "3", "1", "3", "6", "3", "2", "4", "4", "4", "3", "2", "6", "5", "5", "2", "4", "1", "1", "2"];
var lost = ["2", "2", "4", "3", "1", "4", "5", "4", "4", "5", "6", "7", "5", "6", "6", "8", "7", "10", "10", "10"];
var goalsScored = ["29", "28", "40", "30", "22", "13", "19", "18", "22", "16", "20", "12", "17", "12", "11", "12", "12", "12", "8", "11"];
var goalsAgainst = ["10", "14", "14", "17", "13", "15", "21", "13", "18", "16", "19", "18", "19", "18", "20", "28", "15", "26", "22", "28"];
var teamImages = ["Images/Teams/1.ico", "Images/Teams/2.ico", "Images/Teams/3.ico", "Images/Teams/4.ico", "Images/Teams/5.ico", "Images/Teams/6.ico", "Images/Teams/7.ico", "Images/Teams/8.ico", "Images/Teams/9.ico", "Images/Teams/10.ico", "Images/Teams/11.ico", "Images/Teams/12.ico", "Images/Teams/13.ico", "Images/Teams/14.ico", "Images/Teams/15.ico", "Images/Teams/16.ico", "Images/Teams/17.ico", "Images/Teams/18.ico", "Images/Teams/19.ico","Images/Teams/20.ico"];
var createTable = document.createElement("table");
createTable.id = "bplTable";
createTable.border = "1";
var createHeaderRow = document.createElement("tr");
createHeaderRow.id = "tableHeader";
var th1 = document.createElement("th");
th1.innerHTML = "Pos";
var th2 = document.createElement("th");
th2.innerHTML = "";
var th3 = document.createElement("th");
th3.innerHTML = "Team";
th3.id = "teamName";
var th4 = document.createElement("th");
th4.innerHTML = "P";
var th5 = document.createElement("th");
th5.innerHTML = "W";
var th6 = document.createElement("th");
th6.innerHTML = "D";
var th7 = document.createElement("th");
th7.innerHTML = "L";
var th8 = document.createElement("th");
th8.innerHTML = "F";
var th9 = document.createElement("th");
th9.innerHTML = "A";
var th10 = document.createElement("th");
th10.innerHTML = "+/-";
var th11 = document.createElement("th");
th11.innerHTML = "Pts";
createHeaderRow.appendChild(th1);
createHeaderRow.appendChild(th2);
createHeaderRow.appendChild(th3);
createHeaderRow.appendChild(th4);
createHeaderRow.appendChild(th5);
createHeaderRow.appendChild(th6);
createHeaderRow.appendChild(th7);
createHeaderRow.appendChild(th8);
createHeaderRow.appendChild(th9);
createHeaderRow.appendChild(th10);
createHeaderRow.appendChild(th11);
for (i = 0; i < 20; i++)
{
var createNewRow = document.createElement("tr");
var td1 = document.createElement("td");
td1.innerHTML = [i];
var td2 = document.createElement("td");
td2.innerHTML = "<img alt="" + teams[i] + "" src="+teamImages[i]+"/>";
var td3 = document.createElement("td");
td3.innerHTML = teams[i];
td3.id = "teamName";
var td4 = document.createElement("td");
td4.innerHTML = played[i];
var td5 = document.createElement("td");
td5.innerHTML = won[i];
var td6 = document.createElement("td");
td6.innerHTML = draw[i];
var td7 = document.createElement("td");
td7.innerHTML = lost[i];
var td8 = document.createElement("td");
td8.innerHTML = goalsScored[i];
var td9 = document.createElement("td");
td9.innerHTML = goalsAgainst[i];
var td10 = document.createElement("td");
td10.innerHTML = goalsScored[i] - goalsAgainst[i];
var td11 = document.createElement("td");
td11.innerHTML = (won[i] * 3) + (draw[i]);
createNewRow.appendChild(td1);
createNewRow.appendChild(td2);
createNewRow.appendChild(td3);
createNewRow.appendChild(td4);
createNewRow.appendChild(td5);
createNewRow.appendChild(td6);
createNewRow.appendChild(td7);
createNewRow.appendChild(td8);
createNewRow.appendChild(td9);
createNewRow.appendChild(td10);
createNewRow.appendChild(td11);
createTable.appendChild(createNewRow);
}
document.body.appendChild(createTable);
Upvotes: 0
Philippe T.
Reputation: 1192
First mistake that i see , your i variable for loop must start at 0 not at 1
second mistake seems to be copy/paste error , on the loop you have to use the variable name tdx not thx:
var td3 = document.createElement("td");
t3.innerHTML = teams[i]; //instead of th3
t3.id = "teamName";
and for include in your body html , i have to know about basic structure.
Otherwise use jquery framework for exemple like propose Shidhar
Upvotes: 0
Related Questions
- HTML Javascript loop to create a table
- Using an array to create a table through JavaScript by the for looping method
- Creating HTML table using nested for loops
- Generate Table using Javascript
- Making table using for-loop
- jQuery function to create HTML table from another HTML table
- how to construct table in jQuery using for loop and .append() method
- Creating Tables Using Java Script
- Nested 'for' Loop to Create Table
- Generate Html table using for loop