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)//立即执行函数,避免污染全局变量

完成效果:

5eb612e1a8d3

完成效果

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/371466.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用JBehave,Gradle和Jenkins的行为驱动开发(BDD)

行为驱动开发 (BDD)是一个协作过程 ,产品负责人,开发人员和测试人员可以合作交付可为企业带来价值的软件。 BDD是 测试驱动开发 (TDD) 的合理下一步 。 行为驱动的发展 本质上,BDD是一种交付…

手型显示html,css各种手型集合(css禁止手型)

html>css各种手型集合(css禁止手型).auto { cursor: auto; }.deafult { cursor: default; }.none { cursor: none; }.context-menu { cursor: context-menu; }.help { cursor: help; }.pointer { cursor: pointer; }.p…

Maven Fluido Skin和Javadoc类图

我使用Maven网站已有一段时间了,对此我感到非常满意。 我不想在Maven 3之后更新我的项目,但是没关系,Maven 3带来了许多新奇的东西。 但是,有两件事使我感到烦恼:缺乏美观和现代的外观,以及浏览复杂代码的J…

ZooKeeper安装,部署

实验环境 192.168.1.10  Zookeeper1:2181, Zookeeper2:2182 192.168.1.11  ZooKeeper3:2181 依赖环境 JDK1.7 安装,配置 1、下载解压 # 192.168.1.10cd /data/server tar -zxv -f zookeeper-3.4.6.tar.gz ln -s zookeeper-3.4.6 zookeeper1ln -s zookeeper-3.4.…

咸宁省2021年模拟高考成绩查询怎么查,2021咸宁市地区高考成绩排名查询,咸宁市高考各高中成绩喜报榜单...

距离2018年高考还有不到一个月的时间了,很多人在准备最后冲刺的同时,也在关心高考成绩。2018各地区高考成绩排名查询,高考各高中成绩喜报榜单尚未公布,下面是往年各地区高考成绩排名查询,高考各高中成绩喜报榜单,想要了解同学可以…

保证主题,JMS规范和ActiveMQ的消息传递

最近,一个客户要求我仔细研究ActiveMQ的“持久”消息的实现,它如何应用于主题以及在存在非持久订阅者的故障转移方案中会发生什么。 我已经了解到,JMS语义规定,即使面对消息代理提供者失败,也只能保证主题的持久订户以…

java中的除法及求余运算特殊性。

1.如果除法运算符的两个操作数都是整数类型,则计算结果也是整数,就是将自然除法的结果截断取整,例如19/4的结果是4,而不是5。并且除数不能0,否则将引起除0异常 2.如果运算符的两个操作数有1个是浮点数,或两…

林海峰老师python课件密码

egon4573转载于:https://www.cnblogs.com/fengjunhua/p/7395591.html

国际旅游管理专业跨专业考计算机,旅游管理考研我想跨专业考旅游管理专业的研究 – 手机爱问...

2005-12-11我是学旅游管理的大一学生,听人说这专业就这位兄弟提出的苦恼在大学生中很典型呀!其实你说的不尽然!旅游管理专业,是个很有前景的专业呀!怎么会没有前途呀?你对自己的人生也太悲观了吧?就是你说,学校不太好,这可能对自身在大学四年的发展有所限制,但这主要还是看自…

Java注释:探究和解释

Java 5 SE的许多出色功能之一是Annotations构造的引入。 注释是一些标签,我们可以将其插入程序源代码中,以使用某种工具对其进行处理并使其变得有意义。 注释处理工具通常使用(Java 5 SE的)Reflection API在Java代码或字节码级别的…

C# 类

一 string 类型 变量.Length - 字符串长度,返回int类型 string s "abcdefg"; int a s . Length; Console.WriteLine(a); // 输出结果为:7(此字符串有7个字符) // Length返回有多少个字符&am…

node+mongodb+win7

一、安装mongodb,参照教程,注意要先启动mongod.exe,再启动mongd.exe。 转载于:https://www.cnblogs.com/iloveyou-sky/p/7396997.html

cdrom是多媒体微型计算机,全国计算机二级题库第三章

同时按下CTRLALTDEL组合键的作用是(使用任务管理器关闭不响应的应用程序下列说法正确的是(在微型机性能指标中,CPU的主频越离,其运算速度越快)微型计算机键盘上的Tab键是(交替换档键)微型计算机键盘上的Enter键是(回车键)微型计算机的运行速度的单位是mi…

Spring MVC控制器JUnit测试

JUnit测试Spring MVC控制器并非易事 。 但是最近,一个新项目 (即将在Spring推出)提供了新工具来简化此工作。 这篇文章说明了如何通过JUnit测试来测试一个简单的控制器。 该代码是JUnit Testing Spring Service和DAO(带有内存数据…

java基础03变量和基本数据类型

package cn.bdqn.test;/*** * author 小豆腐* * 变量:会变化的量??* 一个数据在内存中存储空间的表示!在运行期间可以动态改变!* * 关键字:在java中已经被使用或者定义的单词!不能作为变量名&#xff01…

5.set集合

list_1 [1,2,3,4,5]list_2 [1,3,5,7,9]#列表转成set集合set_1 set(list_1)set_2 set(list_2)#交集print(set_1.intersection(set_2))print(set_1 & set_2)#判断没有交集print(set(["a","b"]).isdisjoint(set_1))#并集print(set_1.union(set_2))pri…

JavaFX中基于表达式的PathTransitions

在JavaFX中,您可以使用PathTransition对象为路径上的节点设置动画。 PathTransitions使用Shape对象描述它们需要沿其动画的路径。 JavaFX提供了各种类型的形状(例如,多边形,圆形,多边形,路径)。…

html 显示视频列表,dvd光碟制作节目轨菜单布局,不要视频缩略图,只显示文件列表...

“如何在刻录视频光盘时自定义制作菜单?实现的效果就是当光盘插入DVD影碟机播放时,首先会出现一个所有视频文件列表的菜单(节目轨菜单),就相似于音乐CD曲目表一样,不需要有视频缩略图,可通过遥控器选择性播放列表中某一…

v3学院教你学习-task和function的异同

v3学院教你学习-task和function的异同 task(任务)与function(函数)的不同 任务与函数主要有以下四点不同: l 函数只能与主模块共用一个仿真时间单位,而任务定义自己的仿真时间单位。 l 函数不能启动任务&am…

Spring事件的观察者模式

介绍 观察者模式的本质是“定义对象之间的一对多依赖关系,以便当一个对象改变状态时,其所有依赖关系都会得到通知并自动更新。” GoF。 观察者模式是发布/订阅模式的子集,它允许许多观察者对象查看事件。 可以在不同的情况下使用此模式&#…