javascript - 如何将行/列/值列表呈现到表中

Question

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

http://jsfiddle.net/ailerifren/3v8hf/

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,'']
];

演示