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>附加到表中，然后将<td>附加到表中，然后将另一个<td>附加到表中。净效果是三个<tr>元素，没有内容，后跟6个<td>元素。

您需要将其更改为：

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

Jquery表行不会中断

1 个答案: