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


<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>

你可能感兴趣的:(JavaScript,js插件)