jQuery - 如何动态打印空表

Question

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

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

我也试过

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

，而不是

var column = $("<td>") 

等

它总是在HTML相同的结果： “[对象的对象]”

我究竟做错了什么？

谢谢!!

$(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)); 
    } 
} 

确保您使用局部变量循环计数器。否则，环路createTableRow会更新createTable中的计数器，从而导致该环路提前结束。

Answer 2

您意外执行字符串连接操作+= createTableRow...。改变行的阵列，并且利用推代替

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; 
}