javascript - 将数据附加到表中作为变量

标签 javascript jquery html json html-table

我正在尝试创建一个表来显示来自 MySQL 数据库的持久高分。尽管我已将数据输入代码(JSON 格式),但我无法以合适的方式显示它。我正在尝试将包含高分数据的表格附加到正文。行数取决于数据量,但列数始终为两。

$.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。我在代码中有用于调试的警报,但这不是我想要显示数据的方式。我希望在表格上为每个分数添加一个新行,并且每行将有两列。一张用于名称,一张用于分数。

最佳答案

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

更像这样:

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

关于javascript - 将数据附加到表中作为变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18451344/

相关文章:

javascript - 如何在纯 Javascript 中进行无限滚动

jquery - 我如何使这个 CSS 水平菜单居中?

javascript - 当我们通过按钮添加时,禁用的日期不会在 View 上更新

javascript - 窗口调整大小时修复div

jquery - 如何使用 jQuery 将页面向上或向下滚动到 anchor ?

javascript - 三个不同 div 上的同一张图像,只加载一次?如何?

html - 无法滚动到容器溢出的 flex 元素顶部

javascript - jQuery — 带有滚动边栏的固定内容

javascript - 带有进度条的 Bootstrap 导航选项卡

javascript - 在 Javascript 中使用 OOP 返回未定义的值