Question

我在这里有一个演示，基本上解释了我的需求。

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表？

我知道我可以使用模板，但这不是我的观点。我的主要问题是我无法找到一种有效的方法来将列表表示为格式化的表格。

感谢您的帮助。

Answer 1

我认为这可能是您数据的清晰表示：

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

DEMO

如何将行/列/值列表呈现给表

1 个答案: