У меня есть следующие json-данные, которые я хотел бы отображать в формате HTML-таблицы.
Данные:
data = [{"target": "cpu1", "datapoints": [[100, 1388661130], [100, 1388661140], [100, 1388661150], [100, 1388661160], [100, 1388661170], [100, 1388661180], [100, 1388661190], [100, 1388661200], [100, 1388661210], [100, 1388661220], [100, 1388661230], [100, 1388661240], [100, 1388661250]]}, {"target": "cpu2", "datapoints": [[400, 1388661130], [400, 1388661140], [400, 1388661150], [400, 1388661160], [400, 1388661170], [400, 1388661180], [400, 1388661190], [400, 1388661200], [400, 1388661210], [400, 1388661220], [400, 1388661230], [400, 1388661240], [400, 1388661250]]}, {"target": "cpu3", "datapoints": [[400, 1388661130], [400, 1388661140], [400, 1388661150], [400, 1388661160], [400, 1388661170], [400, 1388661180], [400, 1388661190], [400, 1388661200], [400, 1388661210], [400, 1388661220], [400, 1388661230], [400, 1388661240], [400, 1388661250]]}];
Моя идея - показать его как таблицу:
Time|Cpu 1 | cpu 2| cpu 3|
t1 v1 v2 v3
Мой код до сих пор находится в jsfiddle, где мне удалось получить формат таблицы, за исключением того, что мои cpu2 и cpu 3 не заполнены:
Time|cpu1|cpu2|cpu3
t1 v1
t2 v2
t1 v3
t2 v4
t1 v5
t2 v6
Мой код доступен здесь.
Любая помощь будет приветствоваться, в настоящее время я использую html-таблицы, есть ли другой метод, использующий плагины таблицы jquery для упрощения задачи?
Пожалуйста, проверьте скрипт обновления @здесь
if(data){
var len = data.length;
var row = new Array;
// alert (len);
var txt = "";
if(len > 0){
var tab2 = document.getElementById("table");
var table = document.getElementById("coltab");
for(var i=0;i<len;i++){
//alert (i);
// var row = tab2.insertRow(1);
var len_data = data[i].datapoints.length;
var cell1 = table.insertCell(i+1);
//var cell2 = row.insertCell(1);
cell1.innerHTML = data[i].target;
for (var j = 0; j <len_data;j++) {
if (i==0)
row[j] = tab2.insertRow(j+1);
if (i==0)
{
var cell2 = row[j].insertCell(0);
cell2.innerHTML = data[i].datapoints[j][1];
}
var cell3 = row[j].insertCell(-1);
cell3.innerHTML = data[i].datapoints[j][0];
}
}
}
}
Цель аргумента в insertCell
такова:
Требуется в Firefox и Opera, необязательно в IE, Chrome и Safari. Число (начинается с 0), которое определяет позицию новой ячейки в текущей строке. Значение 0 приводит к тому, что новая ячейка будет вставлена в первую позицию. Можно также использовать значение -1; что приводит к тому, что новая ячейка будет вставлена в последнюю позицию.
Если этот параметр опущен, insertCell() вставляет новую ячейку в последнюю позицию в IE и в первую позицию в Chrome и Safari.
Также, вызывая insertRow
каждый раз, когда вы insertRow
существующую строку каждый раз в таблице. его нужно называть только один раз
Написать:
if (data) {
var len = data.length;
var txt = "",
th = "";
if (len > 0) {
var alen = data[0].datapoints.length;
for (var j = 0; j < alen; j++) {
txt += "<tr>";//new row
for (var i = 0; i < len; i++) {
var dt = data[i].datapoints[j][0];
var first = data[i].datapoints[j][1];
if (i == j) {
th += "<th>" + data[i].target + "</th>";
}
if (i == 0) {
txt += "<td>" + first + "</td>"; //first cell in each row
}
txt += "<td>" + dt + "</td>";
}
txt += "</tr>";//end row
}
}
$("#table").append(txt); //table data
$("#coltab").append(th); //header row
}