Добавление таблицы с данными как переменными

Question

Я пытаюсь создать таблицу, чтобы показать сохраненные рекорды, поступающие из базы данных 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. У меня есть предупреждения в коде для отладки, но это не то, как я хочу отображать данные. Я хочу, чтобы для каждой оценки была новая строка таблицы, и каждая строка будет иметь два столбца. Один для имени и один для оценки.

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