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!

Sridhar R
  • 20,190
  • 6
  • 38
  • 35
Shashank
  • 107
  • 3
  • 16
  • Looks like something AngularJS ng-repeat could do. See http://docs.angularjs.org/api/ng.directive:ngRepeat – James A Mohler Dec 06 '13 at 06: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... – Shashank Dec 06 '13 at 06:07
  • How about using document.write(). Something like http://stackoverflow.com/questions/17159451/table-generated-in-by-javascript-not-displaying – James A Mohler Dec 06 '13 at 06:10

3 Answers3

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

Sridhar R
  • 20,190
  • 6
  • 38
  • 35
  • I try to avoid that much string concatenation and use something like `var output=[]; output.push(''); output.join('')` - here is a demo with this approach: http://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
     – Jason Sperske Dec 06 '13 at 06:31
  • Turns out the `array.join('')` hasn't been faster than string concatenation for sometime now (http://stackoverflow.com/questions/7299010/why-is-string-concatenation-faster-than-array-join), If you fix your broken HTML (need to close your `` and ``) 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. – Jason Sperske Dec 06 '13 at 06:38
  • Thanks Sridhar! That helped me understand the problem! – Shashank Dec 06 '13 at 20:35
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

Philippe T.
  • 1,182
  • 7
  • 11
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);
Rhyono
  • 2,420
  • 1
  • 25
  • 41