場景：指定元素，生成自定義表格。

目的：了解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

總結

以上是生活随笔為你收集整理的html生成自定义表格,自定义js的表格插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。