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中的lastIndexOf()方法使用详解
Jun 06 Javascript
简介JavaScript中search()方法的使用
Jun 06 Javascript
jQuery实现首页图片淡入淡出效果的方法
Jun 10 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
js鼠标点击图片切换效果实现代码
Nov 19 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
详细讲解JavaScript中的this绑定
Oct 10 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
Angularjs上传文件组件flowjs功能
Aug 07 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
JavaScript常见JSON操作实例分析
Aug 08 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 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教程 基本语法
2009/10/23 PHP
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
PHP中单例模式的使用场景与使用方法讲解
2019/03/18 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
脚本安需导入(装载)的三种模式的对比
2007/06/24 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
js实现简易垂直滚动条
2017/02/22 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
[16:01]夜魇凡尔赛茶话会 第二期01:你比划我猜
2021/03/11 DOTA
Python有序查找算法之二分法实例分析
2017/12/11 Python
基于pytorch的保存和加载模型参数的方法
2019/08/17 Python
python随机模块random的22种函数(小结)
2020/05/15 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
社区工作者思想汇报
2014/01/13 职场文书
工作时间上网检讨书
2014/02/03 职场文书
鼋头渚导游词
2015/02/05 职场文书
文员岗位职责范本
2015/04/16 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
酒店员工管理制度
2015/08/05 职场文书
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python