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 相关文章推荐
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
Dec 15 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
关于动态执行代码(js的Eval)实例详解
Aug 15 Javascript
Promise.all中对于reject的处理方法
Aug 01 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 Javascript
微信小程序地图实现展示线路
Jul 29 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 Javascript
使用JS实现简易计算器
Jun 14 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 301转向实现代码
2008/09/18 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
Javascript 6里的4个新语法
2016/08/25 Javascript
JS实现的简单轮播图运动效果示例
2016/12/22 Javascript
jQuery ajax请求struts action实现异步刷新
2017/04/19 jQuery
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
vue 简单自动补全的输入框的示例
2018/03/12 Javascript
微信小程序实现发红包功能
2018/07/11 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
python统计一个文本中重复行数的方法
2014/11/19 Python
python批量提取word内信息
2015/08/09 Python
Python无损音乐搜索引擎实现代码
2018/02/02 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
python GUI实现小球满屏乱跑效果
2019/05/09 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
如何验证python安装成功
2020/07/06 Python
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
联想马亚西亚官方网站:Lenovo Malaysia
2018/09/19 全球购物
苹果台湾官网:Apple台湾
2019/01/05 全球购物
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
一套中级Java程序员笔试题
2015/01/14 面试题
25岁生日感言
2014/01/13 职场文书
人力资源总监工作说明
2014/03/03 职场文书
演讲主持词
2014/03/18 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
交通安全教育主题班会
2015/08/12 职场文书
无故旷工检讨书
2015/08/15 职场文书
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python