Question

Hello Fellow Developers，我是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

Answer 2

我看到的第一个错误，你的i变量for循环必须从0开始而不是1

第二个错误似乎是复制/粘贴错误，在循环中你必须使用变量名称tdx而不是thx：

var td3 = document.createElement("td");
t3.innerHTML = teams[i]; //instead of th3
t3.id = "teamName";

并且为了包含在你的身体html中，我必须知道基本结构。

否则使用jquery框架例如提议Shidhar

Answer 3

修复代码：

数组中有20个项目，数组从0开始，这意味着最后一个ID为19.因此，for需要小于20，而不是21。

接下来，for中的所有内容都会生成td#个变量，但您正在尝试更改th#变量的值。

最后，您没有createDiv变量，这显然会阻止您的表格输出。

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

使用For循环在Javascript中创建表

3 个答案: