0

jQueryを使用してテーブルをdivにビルドしようとしていますが、コードは次のとおりです。ただし、新しいtrがテーブルに追加されても、結果のテーブルは3行ではなく、すべてのtrが1行にまとめられています。.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列のテーブルであった可能性がありますが、どういうわけか機能しません。助けてください。

4

1 に答える 1

1

問題は、append追加されたものではなく、$theTableを返すことです。したがって、<tr>はテーブルに追加され、次にa<td>がテーブルに追加され、次に別のaがテーブルに<td>追加されます。正味の効果は<tr>、コンテンツのない3つの要素と、それに続く6つ<td>の要素です。

次のように変更する必要があります。

$theTable.append($('<tr>').append($("<td>").text(currentArray.label)
                                    ,$("<td>").text(currentArray.value)));
于 2012-06-29T06:10:33.723 に答える