Question

这几乎正常，但我遗漏了一些东西。我正在构建一个html表，我有JQuery。这个想法很简单。我有一个名称列表，它将填充表体的第一列。接下来是两个空白列，用于某些书籍，然后根据传递到函数中的日期值的月份天数，然后是最终簿记列，列出多个列。

一般表结构很好，标题和colgroup都很好。咬我的是每个身体行中<td></td>的部分，与月份的日期相对应。它们没有显示在结果表中。

有两个循环。第一个构建显示colgroup，header和body行的月日列所需的元素。同样，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。

另外，我也没有看到你的结束表标签。

Answer 2

你可以看到here

附加trb

$trb.append($('<p>x</p>')); // this will make you see lots of "x" in your table
$bodyRow.append($trb); //  <===== so this is appending

你不应该按照你的方式将tr（trb）附加到另一个tr（bodyRow）中，我猜你真的不想那样做？！

使用jQuery构建HTML表

2 个答案: