0

MySQL データベースからの永続的なハイスコアを表示するテーブルを作成しようとしています。コード (JSON 形式) にデータが入っていますが、見栄えのする方法で表示するのに問題があります。ハイスコ​​ア データを使用して、本文にテーブルを追加しようとしています。行数はデータの量によって異なりますが、列数は常に 2 です。

$.ajax({
    url : '../server.php',
    type : 'GET',
    success : function(response) {
        var toAppend = '<table style="position: fixed; top:200px; left: 200px;" id="highscores">';
        var jsonObject = eval(response);
        var highscores = "";
        for ( i = 0; i < jsonObject.length && i < 10; i++) {
            highscores += jsonObject[i].Name + " " + jsonObject[i].Score + "\n";
            toAppend += "<tr>";
            toAppend += jsonObject[i].Name;
            toAppend += "</tr><tr>";
            toAppend += jsonObject[i].Score;
            toAppend += "</tr>";
        }
        toAppend += "</table>";
        $('body').append(toAppend);
        alert(highscores);
    },

    error : function() {
        alert("fail");
    }
});

これは、MySQL データを取得して JSON に変換したサーバーから json データを受信するための私のコードです。デバッグ用のコードにアラートがありますが、これはデータを表示する方法ではありません。スコアごとにテーブルに新しい行が必要で、各行には 2 つの列があります。1 つは名前用、もう 1 つはスコア用です。

4

1 に答える 1

2

オブジェクトごとに行を追加してからセルを追加するのではなく、値ごとに行を追加しています。

このようなもの：

var toAppend = $('<table style="position: fixed; top:200px; left: 200px;" id="highscores"></table>');
var jsonObject = eval(response);

for ( i = 0; i < jsonObject.length && i < 10; i++) {
  var newRow = $('<tr></tr>');
  $('<td></td>').text(jsonObject[i].Name).appendTo(newRow);
  $('<td></td>').text(jsonObject[i].Score).appendTo(newRow);
  newRow.appendTo(toAppend);
}

$('body').append(toAppend);
于 2013-08-26T19:20:44.753 に答える