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 相关文章推荐
让插入到 innerHTML 中的 script 跑起来的实现代码
Jul 01 Javascript
彻底搞懂JS无缝滚动代码
Jan 03 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
Aug 09 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
AngularJS实现图片上传和预览功能的方法分析
Nov 08 Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 Javascript
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
JavaScript箭头函数中的this详解
Jun 19 Javascript
javascript实现贪吃蛇经典游戏
Apr 10 Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 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
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
PHP JSON格式数据交互实例代码详解
2011/01/13 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
详解Vue Elememt-UI构建管理后台
2018/02/27 Javascript
JS实现访问DOM对象指定节点的方法示例
2018/04/04 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
python测试驱动开发实例
2014/10/08 Python
Python中的各种装饰器详解
2015/04/11 Python
Python制作钉钉加密/解密工具
2016/12/07 Python
python制作小说爬虫实录
2017/08/14 Python
Django rest framework基本介绍与代码示例
2018/01/26 Python
Python多线程扫描端口代码示例
2018/02/09 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
采购员的工作职责
2013/12/26 职场文书
追悼会子女答谢词
2014/01/28 职场文书
四年级数学教学反思
2014/02/02 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
剪彩仪式主持词
2014/03/19 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
幸福家庭标语
2014/06/27 职场文书
公积金接收函格式
2015/01/30 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技