Editing DK 导出的 JSON 自定义生成表

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <title>DK 导出的 JSON 自定义生成表</title>
</head>

<body>
    <input type="file" class="nr-file" />
</body>

</html>

table {
    width: 100%;
    border-collapse: collapse;
}

table tr th {
    background-color: #ddd;
}

table tr td,
table tr th {
    padding: 5px;
    border: 1px solid #a1a1a1;
}

document.querySelector('.nr-file').addEventListener('change', function () {
    var file = this.files[0];
    if (file) {
        var r = new FileReader();
        r.onload = function (e) {
            window.txt = e.target.result

            view(txt);
        }
        r.readAsText(file);
    }
}, false)

function view(txt) {
    var json = JSON.parse(txt);

    var maps = {};
    json.forEach(item => {
        var gi = maps[item.TableName] || [];
        gi.push(item);
        maps[item.TableName] = gi;
    })


    for (var k in maps) {

        var table = document.createElement("table");
        var htm = [];

        htm.push('<tr>')
        htm.push('<th>表名</th>')
        htm.push('<th>字段</th>')
        htm.push('<th>注释</th>')
        htm.push('<th>类型</th>')
        htm.push('</tr>')

        var map = maps[k], ki = 0;
        map.forEach(item => {

            htm.push('<tr>')
            if (ki == 0) {
                htm.push(`<td rowspan="${map.length}">${item.TableName}</td>`)
                ki++;
            }
            htm.push(`<td>${item.ColumnName}</td>`)
            htm.push(`<td>${item.ColumnComment}</td>`)
            htm.push(`<td>${item.ColumnType}</td>`)
            htm.push('</tr>')
        })

        table.innerHTML = htm.join('');

        var header = document.createElement("h4");
        header.innerHTML = map[0].TableComment || k;

        document.body.appendChild(header);
        document.body.appendChild(table);
    }
}