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>附加到表中，然後將<td>附加到該表，然後將另一個<td>附加到該表。最終效果是三個<tr>元素沒有內容後跟6 <td>元素。

您需要將其更改爲：

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