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 相关文章推荐
清华大学出版的事半功倍系列 javascript全部源代码
May 04 Javascript
var与Javascript变量隐式声明
Sep 17 Javascript
页面中js执行顺序
Nov 09 Javascript
jquery实现弹出窗口效果的实例代码
Nov 28 Javascript
javascript贪吃蛇完整版(源码)
Dec 09 Javascript
原生javascript实现图片滚动、延时加载功能
Jan 12 Javascript
Javascript基础教程之关键字和保留字汇总
Jan 18 Javascript
js严格模式总结(分享)
Aug 22 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
微信小程序学习之数据处理详解
Jul 05 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 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 水平的题目
2007/05/30 PHP
PHP提示Notice: Undefined variable的解决办法
2012/11/24 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
2020/04/08 Javascript
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
[00:32]2016完美“圣”典风云人物:Maybe宣传片
2016/12/05 DOTA
python 正则式 概述及常用字符
2009/05/07 Python
PyMongo安装使用笔记
2015/04/27 Python
Python制作刷网页流量工具
2017/04/23 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
浅析python中的del用法
2020/09/02 Python
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
StubHub美国:购买或出售您的门票
2019/07/09 全球购物
会计工作心得体会
2014/01/13 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
施工协议书范本
2014/04/22 职场文书
机械工程及自动化专业求职信
2014/09/03 职场文书
自我推荐信格式模板
2015/03/24 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书
2016寒假假期总结
2015/10/10 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL
MySql开发之自动同步表结构
2021/05/28 MySQL
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python
tree shaking对打包体积优化及作用
2022/07/07 Java/Android