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 24 Javascript
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 Javascript
jquery插件validate验证的小例子
May 08 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
Nov 08 Javascript
jQuery中width()方法用法实例
Dec 24 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
May 16 Javascript
浅析Vue实例以及生命周期
Aug 14 Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 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 目录遍历、删除 函数的使用介绍
2013/04/28 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
老生常谈PHP数组函数array_merge(必看篇)
2017/05/25 PHP
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
JS冒泡事件的快速解决方法
2013/12/16 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
2019/07/10 jQuery
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
vue.js实现照片放大功能
2020/06/23 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
python 输出上个月的月末日期实例
2018/04/11 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
HTML5实现签到 功能
2018/10/09 HTML / CSS
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
如何查询Oracle数据库中已经创建的索引
2013/10/11 面试题
办公室主任先进事迹
2014/01/18 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
ORACLE查看当前账号的相关信息
2021/06/18 Oracle
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL