html生成自定义表格,自定义js的表格插件

场景：指定元素，生成自定义表格。

目的：了解js的插件开发。

html代码：

自定义表格插件

var test = new MyTable({

elid:"mytable",//定义哪个div要生成表单

thead:{//指定列名

name:"姓名",

age:"年龄",

addr:"地址",

school:"学校"

},

columns:[{//指定表格数据

name:"张三",

age:24,

addr:"四川省成都市",

school:"四川大学"

},{

name:"李四",

age:25,

addr:"福建省厦门市",

school:"厦门大学"

}]

});

js代码：

(function (global) {

global.MyTable = function (parameter) {

//获取dom元素

var table_dom = document.getElementById(parameter.elid);

//设置div的样式

table_dom.style.width = "500px";

table_dom.style.minHeight="300px";

table_dom.style.border="solid 1px red";

table_dom.style.margin="0 auto";

//创建表格

var table = document.createElement("table");

table.style.width = "100%";

table.style.border="1px solid";

//创建表头

var thead = document.createElement("tr");

thead.id = "thead";

Object.keys(parameter.thead).forEach(function (key) {

var th = document.createElement("th");

th.style.border="1px solid";

th.innerText = parameter.thead[key];

thead.appendChild(th);

});

table.appendChild(thead);

table_dom.appendChild(table);

//创建表体

parameter.columns.map(function (value,index) {

var ttemp = document.createElement("tr");

Object.keys(value).forEach(function (key) {

var td = document.createElement("td");

td.style.border="1px solid";

td.innerText = value[key];

ttemp.appendChild(td);

});

table.appendChild(ttemp);

});

}

})(window)//立即执行函数，避免污染全局变量

完成效果：

完成效果

参考视频教程链接：https://www.bilibili.com/video/av22097728?t=3922