<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 动态创建表格的更多相关文章

  1. 利用javascript动态创建表格

    //说明:实现功能.原理上文相同.不过这次是利用已有的简单的方法创建行和列,并实现内容行鼠标移入变色功能! 效果图: /*两个方法 1.  trNode  table.insertRow(-1)    ...

  2. javascript动态创建表格：新增、删除行和列

    转载:http://www.cnblogs.com/pato/archive/2009/09/02/1559068.html 利用js来动态创建表格有两种格式,appendChild()和insert ...

  3. js动态创建表格,删除行列的小例子

    js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  4. javascript动态添加表格以及获取数据

    <script type="text/javascript"> var dict = { '百度': 'http://wwww.baidu.com', '新浪': 'h ...

  5. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

  6. JavaScript动态改变表格单元格内容的方法

    本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格 ...

  7. FineUIMvc随笔 - 动态创建表格列

    声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 用户需求 用户希望实现动态创建表格列,在 WebForms 中,我们通过在 Page_Init 中创建列来实现: 但是在 MVC ...

  8. FineUIMvc随笔（1）动态创建表格列

    声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. <FineUIMvc随笔>目录 FineUIMvc随笔(1)动态创建表格列 FineUIMvc随笔(2)怎样在控件中 ...

  9. js/jq动态创建表格的行与列

    之前做了一个项目,需求是能动态创建表格行,动态创建表格的列,度了很多资料,都没有动态创建列的插件,所以自己动手写了一个 需求大概是(下图) 1.动态添加一行.2.动态添加一列,3.删除行.4.删除列, ...

随机推荐

  1. RDLC报表系列(六) 多图表-折线图和柱状图

    美好的一天开始了,这篇是RDLC系列的最后一篇文章,我的小项目也已经release,正在测试中. 1.新建demo3.aspx和demo3.rdlc文件 2.往rdlc文件中拖一个图标控件,在弹出的窗 ...

  2. Photoshop CS6 基础知识

                                                                  Photoshop CS6  基础知识 新建  练习 宽度72, 像素厘米 ...

  3. Spring学习之Ioc控制反转（2）

    开始之前: 1. 本博文为原创,转载请注明出处 2. 作者非计算机科班出身,如有错误,请多指正 ---------------------------------------------------- ...

  4. 图的深度优先遍历(DFS) c++ 非递归实现

    深搜算法对于程序员来讲是必会的基础,不仅要会,更要熟练.ACM竞赛中,深搜也牢牢占据着很重要的一部分.本文用显式栈(非递归)实现了图的深度优先遍历,希望大家可以相互学习. 栈实现的基本思路是将一个节点 ...

  5. git管理修改

    为什么Git比其他版本控制系统设计得优秀,因为Git跟踪并管理的是修改,而非文件. 新增了一行,这就是一个修改,删除了一行,也是一个修改,更改了某些字符,也是一个修改,删了一些又加了一些,也是一个修改 ...

  6. ajax查询数据的举例

    1.根据下拉框的值异步查询信息 HTML代码如下: <script> $(function(){ //页面载入时执行 $("#key").change(function ...

  7. matplotlib中使用imshow绘制二维图

    #coding:utf-8 from matplotlib import mpl import matplotlib.pyplot as plt#载入matplotlib快速绘图的函数库 import ...

  8. Swift笔记01

    变量使用var 来声明,常量是所有let ,变量名没什么限制 中文表情都可以 ,一般还是使用英文. var str = "luoshuai "  //swift语句后面不需要; l ...

  9. jQuery ui背景色动态渐变导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. SWOT自我分析

    个人信息: 大三学生 二本大学 软件工程专业 一:SWOT自我分析 Strenghs(优势): 1.有着良好的作息习惯,坚持锻炼 2.专注力强,能沉下心来学习 3.有着强烈的危机意思,明白不仅则退的道 ...