javascript - 以表格格式显示时间序列 json 数据

Question

我有以下 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

我的代码可用 here .

欢迎任何帮助，目前我正在使用 html 表，是否有另一种使用 jquery 表插件来简化任务的方法？

Answer 1

请检查更新 fiddle @here

           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中参数的目的是这样的

Required in Firefox and Opera, optional in IE, Chrome and Safari. A number (starts at 0) that specifies the position of the new cell in the current row. The value of 0 results in that the new cell will be inserted at the first position. The value of -1 can also be used; which results in that the new cell will be inserted at the last position.

If this parameter is omitted, insertCell() inserts the new cell at the last position in IE and at the first position in Chrome and Safari.

此外，每次在表中覆盖现有行时，也可以调用 insertRow 。它只能被调用一次