简易表格自动创建

Html

Css

//原生js表格绑定
var hxj_table = {
    headers: {},
    data: [],
    style: {
        table: {
            width: 'auto',
            height: 'auto',
            border: '1px solid #cdcdcd',
            fontWeight: 'normal'
        },
        th: {
            fontSize: '20px',
            fontWeight: 'bold',
            width: 'auto',
            height: 'auto',
        },
        td: {
            fontSize: '16px',
            fontWeight: 'normal',
            textAlign: 'center'
        }
    },
    //1.初始化表格数据
    init: function(headers, data, style) {
        try {
            if (headers != null) {
                this.headers = headers;
            }
            if (data != null) {
                this.data = data;
            }
            if (style != null) {
                this.style = style;
            }
        } catch (e) {
            console.error(e);
        }
        console.log("init...");
        return this;
    },
    //2.显示数据
    show: function(id) {
        try {
            if (id == null) {
                id = "demo";
                document.write("<div id='demo'><div>");
            }
            var table = "";
            table += "<table style='width:" + this.style.table.width + ";height:" + this.style.table.height + ";border:" + this.style.table.border + ";font-weight:" + this.style.table.fontWeight + "'>";
            if (this.headers != null) {
                table += "<tr>";
                for (let header in this.headers) {
                    table += "<th style='font-size:" + this.style.th.fontSize + ";font-weight:" + this.style.th.fontWeight + ";width:" + this.style.th.width + ";height:" + this.style.th.height + "'>" + this.headers[header] + "</th>";
                }
                table += "</tr>";
            }
            if (this.data != null) {

for (let tr in this.data) {
                    table += "<tr>";
                    for (let td in this.data[tr]) {
                        table += "<td style='font-size:" + this.style.td.fontSize + ";font-weight:" + this.style.td.fontWeight + ";text-align:" + this.style.td.textAlign + "'>" + this.data[tr][td] + "</td>";

}
                    table += "</tr>";
                }

}
            table += "</table>";
            document.getElementById(id).innerHTML = table;
            console.log("success!");
        } catch (e) {
            console.error(e);
        }
    }
}
//初始化调用
;
(function() {
    let headers = {
        name: '姓名',
        age: '年龄',
        high: '身高',
        weight: '体重',
        school: '学校',
        birth: '生日'
    };
    let data = [{
        name: 'john',
        age: 18,
        high: '190cm',
        weight: '180',
        school: '交大',
        birth: '2001-01-01'
    }, {
        name: 'jack',
        age: 18,
        high: '180cm',
        weight: '160',
        school: '交大',
        birth: '2001-01-01'
    }];
    let style;
    hxj_table.init(headers, data, style).show();
})()

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

简易表格自动创建



代码描述：传入json数据，自动创建表格

这个一个简易的表格自动生成工具。hxj_table对象包含init、show两个函数，init主要是初始化表格的各项数据，包括表头，表格样式，表格数据。具体见代码。

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

三年

相关代码

简易表格自动创建

最新