javascript - 从 JSON 构建动态表

Question

过去几天我一直在尝试构建这个动态表。我已经用几种不同的方式构建了它，并最终得到了正确的输出，但是我所做的工作是手动的。我希望有人能帮助我让这变得更有活力。

这是我的 JSON 示例( super 简化)

var obj1 = {
"Summary" : 
[
{
    "ID" : "1234", 
    "Name" : "John", 
    "Status" : "Green",
},
{
    "ID" : "5678", 
    "Name" : "Mike", 
    "Status" : "Green",
},
{
    "ID" : "9012", 
    "Name" : "Tom", 
    "Status" : "Red",
},
{
    "ID" : "3456", 
    "Name" : "Chris", 
    "Status" : "Red",
},
{
    "ID" : "2445", 
    "Name" : "Pat", 
    "Status" : "Green",
},
{
    "ID" : "6543", 
    "Name" : "James", 
    "Status" : "Red",
}

]
};

我需要输出看起来像这样(确实如此)，但是我的数组中可能有超过 6 个对象，所以我需要迭代它而不是手动构建它。

1234   5678    9012    3456    2445    6543
John   Mike     Tom    Chris   Pat     James
Green  Green   Red     Red     Green   Green

这是迄今为止我的代码。任何帮助将不胜感激。

for (j in obj1.Summary[0]) {
document.write('<tr><td class="' + j +'">' + j + '</td><td class="' + j +'">' +     obj1.Summary[0][j] + '</td><td class="' + j +'">' + obj1.Summary[1][j] + '</td><td class="' + j +'">' + obj1.Summary[2][j] + '</td><td class="' + j +'">' + obj1.Summary[3][j] + '</td><td class="' + j +'">' + obj1.Summary[4][j] + '</td><td class="' + j +'">' + obj1.Summary[5][j] + '</td></tr>');
}

Answer 1

我最近想出了一个有趣的模式，用于动态地从数据库输出创建表，同时保留对相关创建元素和用于创建它们的值的引用。

这个方法对我来说很方便，因为我为每个表单元格创建了输入元素，然后利用创建的结构来对照实际值检查原始值，并根据更改的字段生成 SQL 更新查询。

我意识到这对于这种特定情况可能有点过分，但它确实有助于提高可读性和可维护性，因此我将其发布在这里，以防它将来可能对其他人有所帮助。

var responseText = {"Summary":[{"ID":"1234","Name":"John","Status":"Green",}, {"ID":"5678","Name":"Mike","Status":"Green",}, {"ID":"9012","Name":"Tom","Status":"Red",}, {"ID":"3456","Name":"Chris","Status":"Red",}, {"ID":"2445","Name":"Pat","Status":"Green",}, {"ID":"6543","Name":"James","Status":"Red",}]};

var list = new List(responseText.Summary);
document.body.appendChild(list.node);

function List(data) {
    if(!(this instanceof List)) return false;
    var list = this.node = document.createElement('div');
    list.setAttribute('class','list');
    var items  = this.items = {};
    for(var i in data) {
        items[i] = new ListItem(data[i])
        list.appendChild(items[i].node);
    }
}
function ListItem(data) {
    if(!(this instanceof ListItem)) return false;
    var item  = this.node  = document.createElement('div');
    item.setAttribute('class','item');
    var lines = this.lines = {};
    for(var i in data) {
        lines[i] = new ListItemLine(i, data[i])
        item.appendChild(lines[i].node);
    }
}
function ListItemLine(name, value) {
    if(!(this instanceof ListItemLine)) return false;
    var line = this.node = document.createElement('div');
    this.name = name;
    this.value = value;
    line.setAttribute('class','line ' + name);
    if(name !== 'ID')
        line.setAttribute('contenteditable', true);
    line.appendChild(document.createTextNode(value));
}

.item {
    display: inline-block;
    padding: 5px;
    text-align: center;
}

然后我在 List 类中使用了类似的东西，

list.onkeydown = function(e) {
    if(e.which !== 13) return true;
    e.preventDefault();
    var changes = [];
    for(var i in items) (function(item, data){
        for(var i in data.lines) (function(line){
            var value = line.value, 
                actual = line.node.textContent;
            if(value !== actual) changes.push({
                id: data.lines['ID'].value,
                name: line.name,
                value: actual
            });
        })(data.lines[i]);
    })(i, items[i]);
    console.log(encodeURIComponent(JSON.stringify(changes)));
}

我没有使用 console.log，而是通过 ajax 将数据发送到生成更新 sql 并返回查询结果的接收器页面。当然，有很多方法可以完成最后一部分，这是对我最有用的一个。