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 中 document.createEvent的用法
Aug 29 Javascript
jQuery之选择组件的深入解析
Jun 19 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
详解javascript数组去重问题
Nov 06 Javascript
AngularJS实现单独作用域内的数据操作
Sep 05 Javascript
详解vue-cli与webpack结合如何处理静态资源
Sep 19 Javascript
JavaScript如何对图片进行黑白化
Apr 10 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
JS实现处理时间,年月日,星期的公共方法示例
May 31 Javascript
Vue打包后访问静态资源路径问题
Nov 08 Javascript
详解JavaScript执行模型
Nov 16 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
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
php使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
PHP经典算法集锦【经典收藏】
2016/09/14 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
syntaxhighlighter 使用方法
2007/07/02 Javascript
语义化 H1 标签
2008/01/14 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
python中正则的使用指南
2016/12/04 Python
python将文本分每两行一组并保存到文件
2018/03/19 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
使用Python进行目录的对比方法
2018/11/01 Python
python如何删除文件中重复的字段
2019/07/16 Python
python实现双色球随机选号
2020/01/01 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
计算机系毕业生推荐信
2013/11/06 职场文书
个人简历自我评价
2014/01/06 职场文书
身份证丢失证明
2015/06/19 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers