Question

我正在尝试创建一个表来显示来自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");
    }
});

这是我从服务器接收json数据的代码，该服务器获取了MySQL数据并将其转换为JSON。我在调试代码中有警报，但这不是我想要显示数据的方式。我想在桌子上为每个分数添加一个新行，每行将有两列。一个用于名称，一个用于得分。

Answer 1

您为每个值附加行，而不是为每个对象添加行，然后在其中添加单元格。

更像这样：

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

附加一个包含数据作为变量的表

1 个答案: