javascript - 使用 For 循环在 Javascript 中创建表

Question

各位开发者大家好，我是 Javascript 的新手，发现使用 For 循环在 JavaScript 中创建表很困难。如果您能帮助我，那就太好了。

我正在尝试使用 Javascript 制作巴克莱英超联赛表，为此我已将数据保存在各种变量中并将它们用作 for 循环增量。

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

我刚刚得到以下输出

 20 "undefined" undefined   undefined   undefined   undefined   undefined   undefined   undefined   NaN NaN

我尝试了很多调试..但徒劳..

提前致谢!

Answer 1

试试这个方法

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