jQuery - 如何动态打印空表

Posted 2021-05-04

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

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

我也尝试过：

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

答案

+用于连接字符串，而不是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中的计数器，这会导致该循环过早结束。

另一答案

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

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

另一答案

$(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>

另一答案

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

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

以上是关于jQuery - 如何动态打印空表的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 jquery 从 asp.net 视图模型中动态删除行而不删除集合中的其余下一个对象

如何在 jquery 数据表中找到空表或未找到匹配项时添加自定义警告消息

使用jquery动态添加的css打印html表[重复]

MySQL如何加入空表？

我的Android进阶之旅NDK开发之在C++代码中使用Android Log打印日志，打印出C++的函数耗时以及代码片段耗时详情

js打印html指定元素，解决动态获取的图片无法打印问题