1

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=&quot;" + teams[i] + "&quot; 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!

Improve this question
3
  • Looks like something AngularJS ng-repeat could do. See docs.angularjs.org/api/ng.directive:ngRepeat Commented Dec 6, 2013 at 6:05
  • @JamesMohler we haven't been taught AngularJS yet.. i tried using JSON instead of variables first, but it wasnt allowed too.. :( The assignment is to use Javascript to insert the elements.. and no markups on the html page... Commented Dec 6, 2013 at 6:07
  • How about using document.write(). Something like stackoverflow.com/questions/17159451/… Commented Dec 6, 2013 at 6:10

3 Answers 3

Reset to default
2

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);

DEMO

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I try to avoid that much string concatenation and use something like var output=[]; output.push('<table>'); output.join('') - here is a demo with this approach: jsfiddle.net/NHQWV/1 Of course I got into this habit back when this was much faster I should see if this still helps in modern browsers
Turns out the array.join('') hasn't been faster than string concatenation for sometime now (stackoverflow.com/questions/7299010/…), If you fix your broken HTML (need to close your <td> and <tr>) then this has my vote. Manipulating the DOM one element and one property at a time is tedious, send the browser HTML it's good at parsing that stuff.
Thanks Sridhar! That helped me understand the problem!
0

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=&quot;" + teams[i] + "&quot; 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);
Improve this answer

1 Comment

Thanks Rhyono! That helped a lot!
0

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.