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代码因逗号不规范导致IE不兼容的问题
Feb 25 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
浅谈JavaScript作用域和闭包
Sep 18 Javascript
vue中使用ueditor富文本编辑器
Feb 08 Javascript
vue2.0 资源文件assets和static的区别详解
Apr 08 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 Javascript
angular6的table组件开发的实现示例
Dec 26 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 Javascript
小程序实现搜索框功能
Mar 26 Javascript
微信小程序npm引入vant-weapp的踩坑记录
Aug 01 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
Mar 17 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建立文件夹代码
2015/01/06 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
PHP中cookie知识点学习
2018/05/06 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
JavaScript修改css样式style
2008/04/15 Javascript
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
js实现简单的验证码
2015/12/25 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
JQuery 动态生成Table表格实例代码
2016/12/02 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
自己动手封装一个React Native多级联动
2018/09/19 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
Python脚本实现代码行数统计代码分享
2015/03/10 Python
解决python线程卡死的问题
2019/02/18 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
Mavi牛仔裤美国官网:土耳其著名牛仔品牌
2016/09/24 全球购物
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
学生发电厂实习自我鉴定
2013/09/22 职场文书
大学新生军训感言
2014/02/25 职场文书
幼儿园小班植树节活动方案
2014/03/04 职场文书
2014全国两会学习心得体会2000字
2014/03/10 职场文书
承诺书的格式范文
2014/03/28 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
团结主题班会
2015/08/13 职场文书
环保建议书作文500字
2015/09/14 职场文书
祝福语集锦:给妹妹结婚的祝福语
2019/12/18 职场文书
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python