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弹性滑动导航菜单实现思路及代码
May 02 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
Nov 22 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
React组件生命周期详解
Jul 03 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 Javascript
Webpack框架核心概念(知识点整理)
Dec 22 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
基于JavaScript实现表格隔行换色
May 08 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
一个显示天气预报的程序
2006/10/09 PHP
PHP中的正规表达式(二)
2006/10/09 PHP
smarty内置函数capture用法分析
2015/01/22 PHP
jquery中one()方法的用法实例
2015/01/16 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
使用classList来实现两个按钮样式的切换方法
2018/01/24 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
[03:16]DOTA2完美大师赛主赛事首日集锦
2017/11/23 DOTA
低版本中Python除法运算小技巧
2015/04/05 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
python 获取网页编码方式实现代码
2017/03/11 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
python爬虫实现中英翻译词典
2019/06/25 Python
python向图片里添加文字
2019/11/26 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
HTML5 Canvas绘制五星红旗
2016/05/04 HTML / CSS
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
西尔斯百货官网:Sears
2016/09/06 全球购物
出国留学自荐信
2013/10/25 职场文书
税务干部鉴定材料
2014/02/11 职场文书
2014全国两会学习心得体会1000字
2014/03/10 职场文书
幼儿园户外活动总结
2014/07/04 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
个人廉政承诺书
2015/04/28 职场文书
劳动模范获奖感言
2015/07/31 职场文书
家访教师心得体会
2016/01/23 职场文书
MySQL8.0.18配置多主一从
2021/06/21 MySQL
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android
MySQL普通表如何转换成分区表
2022/05/30 MySQL