如何呈現行/列/值列表

我在這裏有一個演示，基本上解釋了我的需要。如何呈現行/列/值列表

var dataClass = function (_x, _y, _v) { 
    this.x = _x; 
    this.y = _y; 
    this.v = _v; 
} 

var dataList = [ 
new dataClass('x1', 'y1', 10), 
new dataClass('x1', 'y2', 11), 
new dataClass('x2', 'y1', 12), 
new dataClass('x2', 'y2', 13), 
new dataClass('x2', 'y3', 14), 
new dataClass('x3', 'y2', 15)]; 

$(function() { 
    var rows = []; 
    var columns = []; 
    $.each(dataList, function (i, v) { 
     if ($.inArray(v.x, rows) < 0) rows.push(v.x); 
     if ($.inArray(v.y, columns) < 0) columns.push(v.y); 
    }); 

    var htmlString = '<tr><th></th>'; 
    $.each(columns, function (i, v) { 
     htmlString += '<th>' + v + '</th>'; 
    }); 
    htmlString += '</tr>'; 

    $('#matrix').append(htmlString); 

    htmlString = ''; 
    $.each(rows, function (ri, rv) { 
     htmlString += '<tr><td>' + rv + '</td>'; 
     $.each(columns, function (ci, cv) { 
      var val; 
      $.each(dataList, function (i, v) { 
       if (v.x == rv && v.y == cv) val = v; 
      }); 
      htmlString += '<td>' + (val ? val.v : '') + '</td>'; 
     }); 
     htmlString += '</tr>'; 
    }); 
    $('#matrix').append(htmlString); 

});

我有這樣的清單，列名和列名和相應的值。有沒有一種優雅的方式將它們呈現爲HTML表格？

我知道我可以使用模板，但那不是我的觀點。我的主要問題是我無法找出一種有效的方式來將列表制定爲格式表格。

感謝您的任何幫助。

來源

2013-05-31 ailerifren

不知道，如果你願意，但你簽出的jQuery插件的DataTable？用於將對象轉儲並獲取全功能表格的優秀插件（帶有搜索和分頁選項）。 http://www.datatables.net/ – bphillips

我認爲這可能是你的數據更清潔的表示：

var dataTable = [ 
    [10,11,''], 
    [12,13,14], 
    ['',15,''] 
];

DEMO

來源

2013-05-31 21:54:28 kei

我的問題實際上是如何操縱我的列表到像你的數據表格表 – ailerifren

你的意思是將你的'dataList'（dataClass對象數組）轉換成'dataTable'（數組數組）？ – kei

如何呈現行/列/值列表

回答

相關問題