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背投广告代码的完善
Apr 08 Javascript
Javascript Cookie读写删除操作的函数
Mar 02 Javascript
javascript 循环读取JSON数据的代码
Jul 17 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
Oct 10 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 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
自己动手做一个SQL解释器
2006/10/09 PHP
phpmyadmin MySQL 加密配置方法
2009/07/05 PHP
使用PHP提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
详解基于Bootstrap扁平化的后台框架Ace
2015/11/27 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
React中this丢失的四种解决方法
2019/03/12 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
Python使用django获取用户IP地址的方法
2015/05/11 Python
Django框架自定义session处理操作示例
2019/05/27 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
python怎么自定义捕获错误
2020/06/29 Python
StubHub德国:购买和出售门票
2017/09/06 全球购物
美国折扣宠物药房:Total Pet Supply
2018/05/27 全球购物
Java程序员常见面试题
2015/07/16 面试题
司机的工作范围及职责
2013/11/13 职场文书
小学科学教学反思
2014/01/26 职场文书
品牌服务方案
2014/06/03 职场文书
社区科普工作方案
2014/06/03 职场文书
生物技术专业求职信
2014/06/10 职场文书
区域销售主管岗位职责
2014/06/15 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
母亲节主题班会
2015/08/14 职场文书
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers
Html5生成验证码的示例代码
2021/05/10 Javascript
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python