JS表格插件（学习使用）

最新推荐文章于 2024-05-03 16:01:29 发布

Little_ChenH

最新推荐文章于 2024-05-03 16:01:29 发布

阅读量1.8k

点赞数

分类专栏： JavaScript js插件文章标签：插件

本文链接：https://blog.csdn.net/little_chenh/article/details/79478683

版权

JavaScript 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

js插件

2 篇文章 0 订阅

订阅专栏

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) { //如果不存在，创建插入一个新的style
            css = 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>

Little_ChenH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS表格插件（学习使用）

js代码// chart.js(function() { window.Table = function(obj) { //天生具备的东西，每次实例化都会执行一次，因此只保存最基本的初始化的东西。 this.nodeElement = obj.el || document.body; //实例对象自定义一个属性保存，表格插入的节点。 this.ap...
复制链接

扫一扫