Heim > Artikel > Web-Frontend > Einführung in die Methode zum Generieren von HTML-Tabellen basierend auf JSON in JS (Code)

Einführung in die Methode zum Generieren von HTML-Tabellen basierend auf JSON in JS (Code)

不言nach vorne: 2018-10-24 11:40:343768Durchsuche

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()
}

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);

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>

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!

json html 字符串 JS border table th

Stellungnahme：

Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Einführung in die sechs Attribute im

Detaillierte Einführung in FastJSON in Java zum Generieren und Analysieren von JSON-Daten (Serialisierungs- und Deserialisierungsdaten)

语文	数学	英语
80	89	90
合计	259