javascript - 使用 jQuery 构建 HTML 表格

Question

这几乎可以工作，但我错过了一些东西。我正在构建一个 html 表并且我有 JQuery。这个想法相当简单。我有一个名称列表，它将填充表主体的第一列。接下来是两个空白列，用于一些簿记，然后是基于传递到函数的日期值所在月份的天数的许多列，然后是最终的簿记列。

总体表结构很好，表头和列组都很好。困扰我的是 <td></td> 的部分位于每个正文行中，对应于该月的天数。它们没有出现在结果表中。

有两个循环。第一个构建显示 colgroup、标题行和正文行的月日列所需的元素。同样，colgroup 和 header 位正在工作。 $trb部分构建了空白的单个“行”td我希望插入到每个正文行中的元素。问题是$trb没有被附加/插入到正文行。

我没看到这个，有什么想法吗？

$(function() {
    var list = ['11111 111', '2222 22222222', '3333333, 3333 3333333'];
    buildMonthTable(new Date(), list);

    function buildMonthTable(targetDate, list) {
        var myDate = new Date(targetDate.getTime());
        myDate.setDate(1);
        myDate.setHours(0);
        myDate.setMinutes(0);
        myDate.setSeconds(0);

        var lastDay = new Date(myDate.getTime());
        var dayNames = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; 

        var $table = $('<table>');
        var $colGroup = $('<colgroup>');
        var $thead = $('<thead>');
        var $tbody = $('<tbody>');
        var $trh = $('<tr>');
        var $trb = $('<tr>');

        $trh.append('<th>Name</th>');
        $colGroup.append('<col class="colPlain colName"/>');
        $trh.append('<th>Last Date</th>');
        $colGroup.append('<col class="colPlain colRank"/>');
        $trh.append('<th>Month Total</th>');
        $colGroup.append('<col class="colPlain colTestDays"/>');

        for (lastDay = new Date(myDate.getTime()); 
            lastDay.getMonth() == myDate.getMonth();
            lastDay.setTime(lastDay.getTime() + 86400000)) {
            $trh.append('<th>' + lastDay.getDate() + '<br/>' 
                + dayNames[lastDay.getDay()] + '</th>');

            if (lastDay.getDay() % 2 == 0) {
                $colGroup.append('<col class="colPlain colDay"/>');
            } else {
                $colGroup.append('<col class="colShade colDay"/>');
            }

            $trb.append('<td>&nbsp;</td>');
        }

        $trh.append('<th>Practice Days This Month</th>');
        $colGroup.append('<col class="colPlain colTestDays"/>');
        $table.append($colGroup);

        $thead.append($trh);
        $table.append($thead);

        for (var i = 0; i <list.length; i++) {
            var $bodyRow = $('<tr></tr>');
            $bodyRow.append('<td>' + list[i] 
                + '</td><td>&nbsp;</td><td>&nbsp;</td>');

        console.log($trb);
            $bodyRow.append($trb);   //  <=====  this is not appending
            $bodyRow.append('<td>&nbsp;</td>');

            $tbody.append($bodyRow);
        }
        $table.append($tbody);

        $("#content").append($table);
    }
});

Answer 1

rafaelcastrocouto 是正确的，它正在输出......所以我认为你的问题在这里:

var $bodyRow = $('<tr></tr>');

您希望 tr 标签位于顶部，并在底部关闭 tr。

此外，我也没有看到您的结束表格标签。