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 权威指南(第四版) 读书笔记
Aug 11 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
Mar 25 Javascript
javascript获取元素偏移量的方法有哪些
Jun 24 Javascript
详解vue事件对象、冒泡、阻止默认行为
Mar 20 Javascript
JS传参及动态修改页面布局
Apr 13 Javascript
vue中keep-alive的用法及问题描述
May 15 Javascript
webpack分离css单独打包的方法
Jun 12 Javascript
React中如何引入Angular组件详解
Aug 09 Javascript
Vue打包后访问静态资源路径问题
Nov 08 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 Javascript
浅析JavaScript预编译和暗示全局变量
Sep 03 Javascript
ant design vue中表格指定格式渲染方式
Oct 28 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面向对象编程快速入门
2006/10/09 PHP
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
jstree的简单实例
2016/12/01 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
python函数返回多个值的示例方法
2013/12/04 Python
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
python中字符串类型json操作的注意事项
2017/05/02 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
解决python "No module named pip" 的问题
2018/10/13 Python
python读取并定位excel数据坐标系详解
2019/06/26 Python
通过Python实现一个简单的html页面
2020/05/16 Python
美国领先的眼镜和太阳镜在线零售商:Glasses.com
2019/08/26 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
应届生法律顾问求职信
2013/11/19 职场文书
工作态度检讨书
2014/02/11 职场文书
双创工作实施方案
2014/03/26 职场文书
同意转租证明
2015/06/24 职场文书
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技