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

html生成自定义表格,自定义js的表格插件相关推荐

js php排序表格,原生JS实现表格排序
最近在学习js的表格排序,没想到看不起眼的表格排序实际上却暗含了众多JS知识点.在这里记录一下此次学习过程.希望对大家也有所帮助. 完整的表格排序涉及了下列这些知识点:call方法使用 sort方法深 ...
html表格查找,js实现表格数据搜索
本文实例为大家分享了js实现表格数据搜索的具体代码,供大家参考,具体内容如下表格数据搜索名称城市 Alfreds Futterkiste Germany Berglunds snabbkop S ...
html表格筛选,js实现表格筛选功能
本应用就两个主要实现: 1.表格的id 和 class之间的命名关系请看图: 将组名和个人信息联表格联系起来,这样会很好的操作表格 HTML代码: 前台设计组张三男浙江宁波李四男浙江宁波胡歌男浙江宁 ...
qtmessagebox对话框里自定义按钮文本_Word里表格都是这么来的 — 生成绘制表格有技巧...
Word可以帮助你跟快地创建具有专业外观的内容,为什么我们会选择Word呢? 因为Word可以减少设置格式的时间,将主要精力集中于撰写文档:借助 SmartArt 图示和新的制图工具更有效地传达信息: ...
开发技巧-使用SQL与Navicat快速导出一个自定义的MYSQL数据库字段表格（数据字典）为Word或Excel
1.基于MYSQL快速形成数据字典表格(数据库字段表格元信息)的需求在书写数据库开发文档或相关文章时,总是可能应用到所设计的数据库元信息,形成一个科学的数据字典表格,相比传统的在Word.Excel ...
el-table 树形表格自定义展开图标_[shell脚本]表格数据在终端可视化输出
最终效果 1. 自定义表格样式 2. 自定义主题颜色支持三系普通颜色支持16色彩虹色支持单颜色回顾一下shell语法 1. shell传递参数我们可以在执行shell脚本时实时传递参数从而指 ...
vue element-ui table表格自定义纵向合计横向合计
1表格横向数据合计表格代码 <el-table-column prop="" label="合计"><template slot-scope ...
layui单据打印_layui打印表格自定义函数
函数如下 function print (tablelayid) { var v = document.createElement("div"); var f = [" ...
html制作不均匀表格,HTML自定义JUnit报告不均匀表格对齐
我正在编写一个java类,它为JUnit测试生成HTML表格报告并使用CSS进行可视化格式化.我有一个对齐单元格的问题,因为生成的柱面数量是不可预测的,因为其中一些列表示传递给可变参数函数的参数.因此 ...
layui中的数据表格-自定义模板
layui中的数据表格-自定义模板<script>layui.use('table', function () {var table = layui.table;//第一个实例table. ...

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

html生成自定义表格,自定义js的表格插件相关推荐

最新文章

热门文章