如何呈现行/列/值列表

我在这里有一个演示，基本上解释了我的需要。如何呈现行/列/值列表

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

如何呈现行/列/值列表

回答

相关问题