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 相关文章推荐
打开超链需要“确认”对话框的方法
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
You might like
php5 mysql分页实例代码
2008/04/10 PHP
php中使用接口实现工厂设计模式的代码
2012/06/17 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
xtree.js 代码
2007/03/13 Javascript
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
vue.js todolist实现代码
2017/10/29 Javascript
nodejs判断文件、文件夹是否存在及删除的方法
2017/11/10 NodeJs
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
JavaScript实现前端倒计时效果
2021/02/09 Javascript
python线程池的实现实例
2013/11/18 Python
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
python使用Flask操作mysql实现登录功能
2018/05/14 Python
python二进制文件的转译详解
2019/07/03 Python
Python实现制度转换(货币,温度,长度)
2019/07/14 Python
python库matplotlib绘制坐标图
2019/10/18 Python
python类共享变量操作
2020/09/03 Python
python绘制汉诺塔
2021/03/01 Python
巧克力蛋糕店创业计划书
2014/01/14 职场文书
总经理助理职责
2014/02/04 职场文书
财务部会计岗位职责
2015/02/03 职场文书
公司人事管理制度
2015/08/05 职场文书