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 相关文章推荐
js宝典学习笔记(上)
Jan 10 Javascript
JQuery打造PHP的AJAX表单提交实例
Nov 03 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
微信小程序request出现400的问题解决办法
May 23 Javascript
JavaScript 五大常见函数
Mar 23 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
详解用JS添加和删除class类名
Mar 25 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
Apr 04 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 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 file_get_contents设置超时处理方法
2013/09/30 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
jQuery设置和移除文本框默认值的方法
2015/03/09 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
js面向对象编程总结
2017/02/16 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
win10系统中安装scrapy-1.1
2016/07/03 Python
浅谈django中的认证与登录
2016/10/31 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
python with (as)语句实例详解
2020/02/04 Python
Python Http请求json解析库用法解析
2020/11/28 Python
python实现无边框进度条的实例代码
2020/12/30 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
serialVersionUID具有什么样的特征
2014/02/20 面试题
路政管理专业个人自荐信范文
2013/11/30 职场文书
在校硕士自我鉴定
2014/01/23 职场文书
周年庆典主持词
2014/04/02 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
迎新晚会策划方案
2014/06/13 职场文书
违纪检讨书范文
2015/01/27 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server