jQuery - 如何动态打印空表

Question

有人可以告诉我我做错了什么吗？

我认为这是字符串添加的东西;

我也尝试过：

var column = $("<td></td>")

代替：

var column = $("<td>")

等等

并且它在HTML上始终是相同的结果：“[object Object]”

我究竟做错了什么？

$(function() {
    createTable(8); 
});


function createTableColumn() {
    var column = $("<td>");

    return column;
}

function createTableRow(gameBoardSize) {
    var columns = "";
    var row;

    for(counter = 0; counter < gameBoardSize; counter++) {
        columns = columns + createTableColumn();
    }

    row = $("<tr>").append(columns);
    return row;

}

function createTable(gameBoardSize) {

    var rows = "";

    for(counter = 0; counter < gameBoardSize; counter++) {
        rows += createTableRow(gameBoardSize);
    }


    $("#gameboard-table").append(rows);
}

Answer 1

+用于连接字符串，而不是jQuery对象。

只需直接附加到jQuery对象：

function createTableRow(gameBoardSize) {
    var row = $("<tr>");
    for(var counter = 0; counter < gameBoardSize; counter++) {
        row.append(createTableColumn());
    }
    return row;
}

function createTable(gameBoardSize) {
    for(var counter = 0; counter < gameBoardSize; counter++) {
        $("#gameboard-table").append(createTableRow(gameBoardSize));
    }
}

确保对循环计数器使用局部变量。否则，for中的createTableRow循环更新createTable中的计数器，这会导致该循环过早结束。

Answer 2

您无意中使用+= createTableRow...执行字符串连接操作。将行更改为数组并使用push

var rows = [];
for(counter = 0; counter < gameBoardSize; counter++) {
    rows.push(createTableRow(gameBoardSize));
}

Answer 3

$(function(){
    createTable(8);
  var i=0;
  $('td').each(function(){
      i++;
    $(this).text(i);
  });
});

function createTable(number){
    for(var count = 0;count<number;count++){
        $('#gameboard-table').append('<tr>');
        $('tr').append('<td>');  
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table id="gameboard-table"></table>

Answer 4

只是字符串连接和一个追加。

function createTable(rowsCount, columnsCount) {
    var rows = "";
    var cell = "";
    var table = $("<table />")
    for (var i = 0; i < columnsCount; i++) {
        cell += "<td></td>";
    }
     for (var i = 0; i < rowsCount; i++) {
         rows += "<tr>" + cell + "</tr>";
     }
     table.append(rows);
         return table;
}