场景：指定元素，生成自定义表格。
目的：了解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
