JS表格插件（学习使用）

js代码

// chart.js
(function() {window.Table = function(obj) { //天生具备的东西，每次实例化都会执行一次，因此只保存最基本的初始化的东西。this.nodeElement = obj.el || document.body; //实例对象自定义一个属性保存，表格插入的节点。this.appWidth = this.nodeElement.clientWidth;this.cellWidth = 0; //初始化一个单元格宽度}Table.prototype.createTable = function(obj) { //二次扩展方法（生成并插入表格节点）if(!obj) { //边界判定，未传入参数时,抛出提醒。throw "Please set the number of rows or columns,arg[obj]"; //抛出一个错误，终止后面代码} else {this.cellWidth = this.appWidth/obj.col; //计算单元格宽度this.Ocss();for(var i = 0; i < obj.row; i++) {//每循环一次创建一个div节点var rowEle = document.createElement("div");this.nodeElement.appendChild(rowEle); //插入到目标app子节点中rowEle.className = "t-row";if(i % 2 == 0) {rowEle.className += " t-double";}for(var j = 0; j < obj.col; j++) {var colEle = document.createElement("div");rowEle.appendChild(colEle); //插入到目标app子节点中colEle.className = "t-col";}}}}Table.prototype.Ocss = function() { //控制样式的方法函数var css = document.getElementsByTagName("style")[0];if(!css) { //如果不存在，创建插入一个新的stylecss = document.createElement("style");document.head.appendChild(css);}css.innerText += ".t-row{width:100%;height:30px;background:#ecffff;border-bottom:1px solid red}.t-double{background:#a6ffff} .t-col{box-sizing:border-box;float:left;width:"+this.cellWidth+"px;height:100%;border-left:1px solid #fff}"; }
})()//函数自执行// this指向当前执行方法、属性的实例（谁用它就指向谁！）
//本函数中this指向window.Table。//插件开发流程:
//1.通过实例参数 告诉构造函数 表格放在哪里
//2.提供一个创建表格的方法
//3.插件开发，必须提供错误提示和修改方法

HTML

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>JS表格插件</title></head><style>*{margin: 0;padding: 0;}#app{width: 800px;min-height: 100px;border: 1px solid red;margin: 30px auto;}</style><body><div id="app"></div></body><script type="text/javascript" src="js/chart.js"></script><script type="text/javascript">var table = new Table({el:app})   //实例化一个对象table.createTable({row:313,  //行col:11,  //列});</script>
</html>

JS表格插件（学习使用）相关推荐

java mvc 分页查询条件_java分页条件查询-GridManager.js表格插件+Pageable分页对象+mybatis pagehelper分页插件...
总览: 一. GridManager.js表格插件直接上插件API:链接地址感觉该插件简单好用,插件作者也是有问必答,nice 二. 添加依赖后端: pom文件添加: 1.7.0.RELEASE ...
JS表格插件DataTables
简介 DateTables是一款jQuery表格插件,可以将任何HTML表格添加交互功能. 分页,即时搜索和排序几乎支持任何数据源:DOM, javascript, Ajax 和服务器处理支持不 ...
Datatables表格插件学习
Datatables 是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能,可以很方便的实现分页,即时搜索和排序. 一.简单使用怎样简单地使用DataTabl ...
vue前端表格插件_Grid.js - 跨框架的前端表格插件
只想简简单单画个表格,但 React,Vue,Angular,-,这么多前端框架,各自都有不同的表格渲染库.就没有表格库能"一次画表,到处运行"吗?来看看 Grid.js 这个跨框 ...
前端可编辑表格插件有哪些
前端可编辑表格插件有哪些一.总结一句话总结:jQuery Handsontable和jExcel.js 1.常用的可编辑表格插件有哪些? jQuery Handsontable和jExcel.js ...
js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable
js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable 参考文章: (1)js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable ...
Table Dragger - 简单的 JS 拖放排序表格插件
Table Dragger 是一个极简的实现拖放排序的表格插件,纯 JavaScript 库,不依赖 jQuery.用于构建操作方便的拖放排序功能,超级容易设置,有平滑的动画,支持触摸事件. 在线演示 ...
html生成自定义表格,自定义js的表格插件
场景:指定元素,生成自定义表格. 目的:了解js的插件开发. html代码: 自定义表格插件 var test = new MyTable({ elid:"mytable",//定 ...
vue.js 天气插件_天气检查我的项目以学习Vue.js
vue.js 天气插件天气 (vue-weather) Weather checking me project for learning Vue.js. 天气检查我的项目以学习Vue.js. Vie ...
[转]jQuery美化表格插件tablecloth.js
转自给力技术 jQuery美化表格插件 - tablecloth.js tablecloth.js 是基于 Twitter Bootstrap 的 jQuery 插件,可让你快速对表格加上漂亮的样式 ...

JS表格插件（学习使用）

js代码

HTML

JS表格插件（学习使用）相关推荐

最新文章

热门文章