利用构造函数创建表格

Posted 2020-08-16

1. 构建基本逻辑 添加属性

<script>
    function cTag( tagName ) {
        return document.createElement( tagName );
    }

    function Table() {
        /* 实际上在调用这个构造函数的时候，应该利用 DOM 方法
         * 创建相应的 table 标签与 tbody 标签 */
        this.DOM = cTag( ‘table‘ );
        this.DOM.appendChild( cTag( ‘tbody‘ ) );
    }

    var t = new Table();
    /* 在开发中有一个原则，就是尽量不去修改原生的对象 */
    document.body.appendChild( t.DOM );

</script>

2. 添加功能，设置宽高

<script>
    function cTag( tagName ) {
        return document.createElement( tagName );
    }

    function Table( width, border ) {
        this.DOM = cTag( ‘table‘ );
        this.DOM.appendChild( cTag( ‘tbody‘ ) );

        this.DOM.width = width;
        this.DOM.border = border;

        this.width = function( w ) {
            this.DOM.width = w;
        }

        this.border = function( border ) {
            this.DOM.border = border;
        }
    }

        var t = new Table( 400, 5 );
    //    t.width( 400 );
    //    t.border( 1 );
        document.body.appendChild( t.DOM );

</script>

3. 利用 json 对象提供参数

由于属性非常多, 但是没有直接的方法去控制用户输入什么 而且 html 标签是支持用户自定义属性的. 构造函数的参数就没有办法控制了. 利用 json 对象提供参数

<script>
        function cTag( tagName ) {
            return document.createElement( tagName );
        }
        function Table( option ) {
            var table = cTag( ‘table‘ );
            /* 利用 for in 循环获得 option 中所有的属性名 */
            for ( var k in option ) {
                // table[ k ] = option[ k ];   给对象添加属性
                table.setAttribute( k, option[ k ] );   // 给标签添加属性
            }
            this.DOM = table;
            table.appendChild( cTag( ‘tbody‘ ) );
        }
        var t = new Table( { width: 400, border: 1, jepson: ‘JepsonName‘});
        document.body.appendChild( t.DOM );
</script>

4. 创建 Tr, Td 对象

<script>
    function cTag( tagName ) {
        return document.createElement( tagName );
    }
    function Table( option ) {
        var table = cTag( ‘table‘ );
        /* 利用 for in 循环获得 option 中所有的属性名 */
        for ( var k in option ) {
            // table[ k ] = option[ k ];   给对象添加属性
            table.setAttribute( k, option[ k ] );   // 给标签添加属性
        }

        this.DOM = table;
        table.appendChild( cTag( ‘tbody‘ ) );

        this.add = function( tr ) {
            // 将 tr 标签添加到 table 标签中
            table.lastChild.appendChild( tr );
        }
    }

    /* 定义 tr */
    function Tr() {
        this.DOM = cTag( ‘tr‘ );
        this.add = function( td ) {
            this.DOM.appendChild( td );
        }
    }

    /* 定义 td */
    function Td( value, option ) {
        var td = cTag( ‘td‘ );
        this.DOM = td;
        for ( var k in option ) {
            td.setAttribute( k, option[ k ] );
        }
        td.innerHTML = value;
    }

    /* 测试数据 */
    var t = new Table( { width: 400, border: 1, jepson: ‘JepsonName‘});

    /* 测试 tr */
    var tr = new Tr();
    t.add( tr.DOM );

    /* 测试 td */
    var td = new Td( 123, { border:1, testTd: ‘testTd‘ } );
    tr.add( td.DOM );

    document.body.appendChild( t.DOM );
</script>

5. 完整的创建一个表格

<script>
    function cTag( tagName ) {
        return document.createElement( tagName );
    }
    /* 表格对象 */
    function Table( option ) {
        var table = cTag( ‘table‘ );
        /* 利用 for in 循环获得 option 中所有的属性名 */
        for ( var k in option ) {
            // table[ k ] = option[ k ];   给对象添加属性
            table.setAttribute( k, option[ k ] );   // 给标签添加属性
        }

        this.DOM = table;
        table.appendChild( cTag( ‘tbody‘ ) );

        this.add = function( tr ) {
            table.lastChild.appendChild( tr );
        }
    }

    /* 定义 tr */
    function Tr() {
        this.DOM = cTag( ‘tr‘ );
        this.add = function( td ) {
            this.DOM.appendChild( td );
        }
    }

    /* 定义 td */
    function Td( value, option ) {
        var td = cTag( ‘td‘ );
        this.DOM = td;
        td.innerHTML = value;
        /* 属性 */
        for ( var k in option ) {
            td.setAttribute( k, option[ k ] );
        }
    }

    /* 表格数据 */
    var arr = [
        { name: ‘jim1‘, age: 19, gender: ‘男‘ },
        { name: ‘jim2‘, age: 18, gender: ‘男‘ },
        { name: ‘jim3‘, age: 20, gender: ‘男‘ },
        { name: ‘jim4‘, age: 18, gender: ‘男‘ }
    ];
    /* 创建表格 */
    var t = new Table( { width: 400, border: 1, jepson: ‘JepsonName‘});

    /* 有多少行数据就创建多少行 */
    for ( var i = 1; i < arr.length; i++ ) {
        /* 创建行，添加行 */
        var tr = new Tr();
        t.add( tr.DOM );
        /* 遍历对象，创建对象，新建 td */
        for ( var k in arr[ i ] ) {
            /* 新建 td 添加 td */
            var td = new Td( arr[ i ][ k ] );
            tr.add( td.DOM );
        }
    }

    /* 将表格渲染到页面中 */
    document.body.appendChild( t.DOM );

</script>