jquery - Jquery Table 行不会中断

Question

我正在尝试使用 jQuery 将表构建到 div 中，代码如下。然而，虽然新的 tr 被追加到表中，但结果表并没有出现 3 行，而是所有 tr 都聚集在一行中。.scoreboard 是一个 div。

function printScoreboard(){


    var $theTable = $('<table>');
        $theTable.css({'border':'solid black 2px'})
                 .addClass('scoreTable');

    var score = [];
    score.push({label:"Total Question: ", value:totalSec});
    score.push({label:"Right Question: ", value:rightQuest});
    score.push({label:"Wrong Question: ", value:wrongQuest});


    for(var idx = 0 ; idx < 3 ; idx ++){

        var currentArray = score[idx];
        $theTable.append('<tr>').append($("<td>").text(currentArray.label)
                                            ,$("<td>").text(currentArray.value));
    }

    console.log("print score board");

    $('.scoreBoard').empty();
    $('.scoreBoard').append($theTable);

}

http://i46.tinypic.com/jjwyg9.png

它可能是 3 行表，但不知何故不起作用。请帮忙。

Answer 1

问题是append返回 $theTable，而不是它附加的内容。因此，将<tr>a 附加到表中，然后将 a<td>附加到表中，然后将另一个<td>附加到表中。最终效果是三个<tr>没有内容的元素后跟 6 个<td>元素。

您需要将其更改为：

$theTable.append($('<tr>').append($("<td>").text(currentArray.label)
                                    ,$("<td>").text(currentArray.value)));