使用 For 循环在 Javascript 中创建表答案

【问题标题】：Create Table in Javascript using For Loop使用 For 循环在 Javascript 中创建表
【发布时间】：2013-12-06 06:03:03
【问题描述】：

各位开发者，您好，我是 Javascript 的新手，发现很难使用 For Loop 在 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

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

提前致谢！

【问题讨论】：

看起来像 AngularJS ng-repeat 可以做的事情。见docs.angularjs.org/api/ng.directive:ngRepeat
@JamesMohler 我们还没有学过 AngularJS.. 我先尝试使用 JSON 而不是变量，但也不允许这样做.. :( 任务是使用 Javascript 插入元素..并且 html 页面上没有标记...
使用 document.write() 怎么样。类似stackoverflow.com/questions/17159451/…

标签： javascript jquery for-loop html-table

【解决方案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

【讨论】：

我尽量避免使用太多的字符串连接，并使用类似var output=[]; output.push('<table>'); output.join('') 的东西 - 这是一个使用这种方法的演示：jsfiddle.net/NHQWV/1 当然，当这要快得多时，我就养成了这个习惯，我应该看看这在现代浏览器中是否仍然有帮助
原来array.join('') 已经有一段时间没有比字符串连接快了（stackoverflow.com/questions/7299010/…），如果你修复了损坏的 HTML（需要关闭你的 <td> 和 <tr>）那么这是我的投票。一次操作 DOM 一个元素和一个属性很乏味，向浏览器发送 HTML，它擅长解析这些内容。
谢谢斯里达尔！这帮助我理解了问题！

【解决方案2】：

修复您的代码：

数组中有 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);

【讨论】：

谢谢犀牛！这帮助很大！

【解决方案3】：

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

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

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

为了包含在你的正文中，我必须了解基本结构。

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

【讨论】：