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

实际结果：

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

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>

Answer 2

你在这里： https://jsfiddle.net/0jvq1q0y/6/

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

for (var i = 15; i < 36; i++) {
if((i-15)%7==0)
            {
        var row = document.createElement("tr");
        tbl.appendChild(row);
            }
        var cell = document.createElement("td");
        var cellText = document.createTextNode(i);
        row.appendChild(cell);
            cell.appendChild(cellText);
}
$('#calendar').append(tbl);

使用嵌套for循环创建HTML表

2 个答案: