javascript - 使用嵌套 for 循环创建 HTML 表格

Question

我已经为此工作了一天左右，但我有点卡住了，所以我希望我能从这件事中解脱出来，对发生的事情有一个更清晰的认识。

本质上，我是在使用嵌套的 for 循环创建 HTML 表格。目标是让表格每行跨越 7 列。

var tbl = document.createElement("table");

for (var i = 15; i < 36; i++) {

    for (var j = 0; j < 7; j++) {
        var row = document.createElement("tr");
        var cell = document.createElement("td");
        var cellText = document.createTextNode(i);

        row.appendChild(cell);
        tbl.appendChild(row);

    }
    cell.appendChild(cellText);

}
$('#calendar').append(tbl);

预期结果:

15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 32 33 34 35

实际结果:

15
16
17
18
19
20
21
22
23
...
35

为了减少输入而简化了结果，但如果有人能给我指出正确的方向，我很想知道我可能会在哪里出错。谢谢。

Answer 1

你可以这样试试

var calendar = document.getElementById('calendar');
var table    = document.createElement("table");                /*Create `table` element*/
var rows     = 3;
var cols     = 7;
var counter  = 15;
for (var i = 1; i <= rows; i++) {
	var tr = document.createElement("tr");                 /*Create `tr` element*/
	for (var j = 1; j <= cols; j++) {
	    var td = document.createElement("td");             /*Create `td` element*/
	    var cellText = document.createTextNode(counter);   /*Create text for `td` element*/
	    ++counter;
	    td.appendChild(cellText);                          /*Append text to `td` element*/
	    tr.appendChild(td);                                /*Append `td` to `tr` element*/
	}
	table.appendChild(tr);                                 /*Append `tr` to `table` element*/
}
calendar.appendChild(table);                                   /*Append `table` to your HTML `calender` DIV*/

<div id="calendar"></div>