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 相关文章推荐
多广告投放代码 推荐
Nov 13 Javascript
简单通用的JS滑动门代码
Dec 19 Javascript
js 动态文字滚动的例子
Jan 17 Javascript
jquery为页面增加快捷键示例
Jan 31 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 Javascript
javascript cookie的简单应用
Feb 24 Javascript
jquery实现页面加载效果
Feb 21 Javascript
浅谈Vue初学之props的驼峰命名
Jul 19 Javascript
5分钟学会Vue动画效果(小结)
Jul 21 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 Javascript
KnockoutJS数组比较算法实例详解
Nov 25 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
php 什么是PEAR?
2009/03/19 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
jquery连缀语法如何实现
2012/11/29 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
js返回顶部实例分享
2016/12/21 Javascript
JavaScript中的工厂函数(推荐)
2017/03/08 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
Three.js基础学习之场景对象
2017/09/27 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
Vue中props的详解
2019/05/16 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
JS实现小星星特效
2019/12/24 Javascript
js布局实现单选按钮控件
2020/01/17 Javascript
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
Python使用scrapy爬取阳光热线问政平台过程解析
2019/08/14 Python
pycharm配置git(图文教程)
2019/08/16 Python
python新手学习使用库
2020/06/11 Python
Python pickle模块常用方法代码实例
2020/10/10 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
房地产管理毕业生自荐信
2013/11/04 职场文书
自主招生自荐信范文
2013/12/04 职场文书
医科大学生的自我评价
2013/12/04 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android
使用Redis实现实时排行榜功能
2021/07/02 Redis