编程 Javascript

javascript 动态创建表格

Posted in Javascript onJanuary 08, 2015

<html>

        <head>

            <script>

                function createTable(rows,lines){

                    this.rows=rows;

                    this.lines=lines;

                    var Body=document.getElementById('body');

                    var Table=document.createElement('table');//创建table标签元素

                    Table.setAttribute('border','1');

                    //给table标签添加其他属性

                    for(var i=0;i<this.rows;i++){

                        var lRow=document.createElement('tr');

                        for(var j=0;j<this.lines;j++){

                            var textNode=document.createTextNode(i+','+j);

                            var lLine=document.createElement('td');

                                lLine.appendChild(textNode);

                            lRow.appendChild(lLine);

                        }

                        Table.appendChild(lRow);

                    }

                    Body.appendChild(Table);

                }

            </script>

        </head>

        <body >

            <div id="body"></div>

        </body>

        <script type="text/javascript">

            createTable(10,10);

        </script>

</html>

第二种方法：

<script>

                function createTable(rows,lines){

                    this.rows=rows;

                    this.lines=lines;

                    var Body=document.getElementById('body');

                    var Table=document.createElement('table');

                    Table.setAttribute('border',1);

                    for(var i=0;i<this.rows;i++){

                        var row=Table.insertRow(i);

                        for(var j=0;j<this.lines;j++){

                            var cells=row.insertCell(j);

                            cells.innerHTML=i+','+j

                        }

                    }

                    Body.appendChild(Table);

                    

                }

            </script>

javascript 动态创建表格

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

打开超链需要“确认”对话框的方法

Mar 08 Javascript

js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]

Jan 08 Javascript

从零开始学习jQuery (四) jQuery中操作元素的属性与样式

Feb 23 Javascript

浅析javascript操作 cookie对象

Dec 26 Javascript

AngularJS基础学习笔记之指令

May 10 Javascript

JS面向对象编程详解

Mar 06 Javascript

Bootstrap CSS组件之大屏幕展播

Dec 17 Javascript

jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】

May 13 jQuery

设置cookie指定时间失效(实例代码)

May 28 Javascript

Bootstrap Paginator+PageHelper实现分页效果

Dec 29 Javascript

判断“命令按钮”是否被鼠标单击详解

Jul 31 Javascript

Vue 打包体积优化方案小结

May 20 Javascript

javascript实现避免页面按钮重复提交

Jan 08 #Javascript

Node.js 制作实时多人游戏框架

Jan 08 #Javascript

jQuery之DOM对象和jQuery对象的转换与区别分析

Jan 08 #Javascript

JavaScript结合AJAX_stream实现流式显示

Jan 08 #Javascript

jQuery中siblings()方法用法实例

Jan 08 #Javascript

推荐5 个常用的JavaScript调试技巧

Jan 08 #Javascript

jQuery中prevUntil()方法用法实例

Jan 08 #Javascript