Einführung in die Methode zum Generieren von HTML-Tabellen basierend auf JSON in JS (Code)-js-Tutorial-php.cn

Dieser Artikel bietet Ihnen eine Einführung in die Methode (den Code) zum Generieren von HTML-Tabellen basierend auf JSON in JS. Ich hoffe, dass er für Sie hilfreich ist .

Zuvor hatte das Unternehmen eine Anforderung: HTML über JS zu generieren. Und die meisten von ihnen generieren Tabellen. Wenn Sie Zeichenfolgen direkt verbinden, ist die Wiederverwendbarkeit des Codes zu gering, daher habe ich ein allgemeines JSON-zu-HTML-Tabellentool geschrieben.

Code

htmlKit = {
    _tags: [], html: [], 
    _createAttrs: function (attrs) {
        var attrStr = [];
        for (var key in attrs) {
            if (!attrs.hasOwnProperty(key)) continue;
            attrStr.push(key + "=" + attrs[key] + "")
        }
        return attrStr.join(" ")
    }, 
    _createTag: function (tag, attrs, isStart) {
        if (isStart) {
            return "<" + tag + " " + this._createAttrs(attrs) + ">"
        } else {
            return "</" + tag + ">"
        }
    }, 
    start: function (tag, attrs) {
        this._tags.push(tag);
        this.html.push(this._createTag(tag, attrs, true))
    }, 
    end: function () {
        this.html.push(this._createTag(this._tags.pop(), null, false))
    }, 
    tag: function (tag, attr, text) {
        this.html.push(this._createTag(tag, attr, true) + text + this._createTag(tag, null, false))
    }, 
    create: function () {
        return this.html.join("")
    }
};

function json2Html(data) {
    var hk = htmlKit;
    hk.start("table", {"cellpadding": "10", "border": "1"});
    hk.start("thead");
    hk.start("tr");
    data["heads"].forEach(function (head) {
        hk.tag("th", {"bgcolor": "AntiqueWhite"}, head)
    });
    hk.end();
    hk.end();
    hk.start("tbody");
    data["data"].forEach(function (dataList, i) {
        dataList.forEach(function (_data) {
            hk.start("tr");
            data["dataKeys"][i].forEach(function (key) {
                var rowsAndCol = key.split(":");
                if (rowsAndCol.length === 1) {
                    hk.tag("td", null, _data[rowsAndCol[0]])
                } else if (rowsAndCol.length === 3) {
                    hk.tag("td", {"rowspan": rowsAndCol[0], "colspan": rowsAndCol[1]}, _data[rowsAndCol[2]])
                }
            });
            hk.end()
        })
    });
    hk.end();
    hk.end();
    return hk.create()
}

Nach dem Login kopieren

Anleitung

HtmlKit

htmlKit ist ein Tool zum Erstellen von HTML-Tags

Funktion

</table>

json2Html

json to Html

Beispiel:

var data = [
    {
        "chinese": 80,
        "mathematics": 89,
        "english": 90
    }
];

var total = 0;
data.forEach(function (value) {
    for (key in value) {
        total += value[key];
    }
});

var htmlMetadata = {
    "heads": ["语文", "数学", "英语"],
    "dataKeys": [["chinese", "mathematics", "english"], ["text","1:2:total"]], // rowspan:colspan:value
    "data": [data, [{"text": "合计","total": total}]]
};

var html = json2Html(htmlMetadata);

console.info(html);

Nach dem Login kopieren

Ausgabeergebnis (das Ergebnis ist Sieht gut aus, formatiert):

<table cellpadding=10 border=1>
    <thead>
    <tr>
        <th bgcolor=AntiqueWhite>语文</th>
        <th bgcolor=AntiqueWhite>数学</th>
        <th bgcolor=AntiqueWhite>英语</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>80</td>
        <td>89</td>
        <td>90</td>
    </tr>
    <tr>
        <td>合计</td>
        <td rowspan=1 colspan=2>259</td>
    </tr>
    </tbody>
</table>

Nach dem Login kopieren

Wirkung:

函数名	作用	例子
start (tag, attrs)	创建未封闭标签头	`start("table", {"cellpadding": "10", "border": "1"})`，输出`<table cellpadding="10" border="1">`
end ()	创建上一个start函数的标签尾	上面执行了start("table")，再执行end()，输出`</table>`
tag (tag, attr, text)	创建封闭标签	`tag("th", {"bgcolor": "AntiqueWhite"}, "hello")`，输出`<th bgcolor="AntiqueWhite">hello</th>`

</table>

Das obige ist der detaillierte Inhalt vonEinführung in die Methode zum Generieren von HTML-Tabellen basierend auf JSON in JS (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：

javascript json

Quelle：segmentfault.com

Vorheriger Artikel：Einführung in die sechs Attribute im

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse