利用构造函数创建表格

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>

转载于:https://www.cnblogs.com/ziyingjie/p/6006095.html