javascript 动态创建表格的2种方法总结


Posted in Javascript onMarch 04, 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>

以上2种方法小伙伴们是否都了解了呢,如有更好的方法,也请大家留言说明下,大家共同进步。

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(7)
Dec 23 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
jquery实现的图片点击滚动效果
Apr 29 Javascript
HTML5实现留言和回复页面样式
Jul 22 Javascript
原生js实现addClass,removeClass,hasClass方法
Apr 27 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
jQuery实现的可编辑表格完整实例
Jun 20 Javascript
详解node.js 下载图片的 2 种方式
Mar 02 Javascript
详解如何构建Promise队列实现异步函数顺序执行
Oct 23 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 Javascript
vue实现分页的三种效果
Jun 23 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 #Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
Mar 04 #Javascript
百度地图自定义控件分享
Mar 04 #Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 #Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
Mar 04 #Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
Mar 04 #Javascript
教你如何使用firebug调试功能了解javascript闭包和this
Mar 04 #Javascript
You might like
PHP日期时间函数的高级应用技巧
2009/05/16 PHP
浅析PHP递归函数返回值使用方法
2013/02/18 PHP
php进程间通讯实例分析
2016/07/11 PHP
CI框架常用函数封装实例
2016/11/21 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
jQuery Ajax使用 全解析
2010/12/15 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
Web开发必知Javascript技巧大全
2016/02/23 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
2017/12/31 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
Python截图并保存的具体实例
2021/01/14 Python
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
校园学雷锋活动月总结
2014/03/09 职场文书
思想道德自我评价2015
2015/03/09 职场文书
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL
设置IIS Express并发数
2022/07/07 Servers