使用numRows和numCols

Question

我在使用几个for循环来动态创建使用JavaScript的表时遇到了一些麻烦。

在此示例中， numRows = 2 且 numCols = 6 。

我的代码：

var table = $('<table></table>');
for (var i = 0; i < numRows; i ++) {
    var row = $('<tr></tr>');
    for (var i = 0; i < numCols; i++) {
        var rowData = $('<td></td>').text('test');
        row.append(rowData);
    }
    table.append(row);
}
console.log(table);

控制台输出显示一个空表。没有行或单元格......就是这样：

如何修复此逻辑，以便正确填充表格，每行包含2行6个单元格？感谢您的帮助！

Answer 1

尝试将嵌套循环中的变量从i更改为j，并记录html而不是jQuery对象。 （此外，那些结束标签是不必要的。）

var table = $('<table>');
for (var i = 0; i < numRows; i ++) {
    var row = $('<tr>');
    for (var j = 0; j < numCols; j++) {
        var rowData = $('<td>').text('test');
        row.append(rowData);
    }
    table.append(row);
}
console.log(table.html());

Answer 2

用于脚本端

var container = $('#my-container'),
  table = $('<table>');
numRows= 3; 
numCols= 4;
for (var x = 0; x < numRows; x ++) {

  var tr = $('<tr>');
     for (var i = 0; i < numCols; i++) {


    tr.append('<td>text</td>');

     }

  table.append(tr);


}

container.append(table);
console.log(table)

html

<div id="my-container"></div>

工作示例

＆＃13;

＆＃13;

var container = $('#my-container'),
  table = $('<table>');
numRows= 2; 
numCols= 4;
for (var x = 0; x < numRows; x ++) {
  
  var tr = $('<tr>');
     for (var i = 0; i < numCols; i++) {

    
    tr.append('<td>text</td>');
  
     }
  
  table.append(tr);


}

container.append(table);
console.log(table)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="my-container"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您需要为列侧创建另一个计数器变量，而不是重用var i。

以下是演示示例：

＆＃13;

＆＃13;

var row = 2, col = 6;
var $table = $('<table/>');
$contents = []; // hold the generated rows
for (var i = 0; i < row; i++) { // loop for rows
    $tr = $('<tr/>');
    for (var j = 0; j < col; j++) { // loop for columns
        // append a td with text [row][col] in tr
        $tr.append($('<td/>', { text: '['+ (i+1) +'][' + (j+1) + ']' }));
    }
    $contents.push($tr); // push each generated row to contents
}
$table.append($contents); // append the contents to table
$('body').append($table); // append table in body
console.log($table.html());

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;