Jquery 테이블 행이 끊어지지 않습니다.

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)));