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 相关文章推荐
jQuery实现列表内容的动态载入特效
Aug 08 Javascript
js 连续赋值的简单实现
Jun 13 Javascript
js 获取元素所有兄弟节点的实现方法
Sep 06 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 Javascript
基于node.js之调试器详解
Aug 22 Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
vue 组件中slot插口的具体用法
Apr 03 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 Javascript
JS forEach跳出循环2种实现方法
Jun 24 Javascript
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
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
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
php防止用户重复提交表单
2015/11/02 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
Javascript 检测、添加、移除样式(className)函数代码
2009/09/08 Javascript
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
2011/03/01 Javascript
如何让DIV可编辑、可拖动示例代码
2013/09/18 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
Electron 调用命令行(cmd)
2019/09/23 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
Python类的用法实例浅析
2015/05/27 Python
Python基础教程之浅拷贝和深拷贝实例详解
2017/07/15 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
大学迎新标语
2014/06/26 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
社保转移委托书范本
2014/10/08 职场文书
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技