<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. UVA 1614 - Hell on the Markets

    题意: 输入n个数,第i个数ai满足1≤ai≤i.对每个数添加符号,使和值为0. 分析: 排序后从最大的元素(假设为k)开始,凑出sum/2即可.用去掉了k的集合,一定可以凑出sum/2 - a[k] ...

  2. new关键字和newInstance()方法的区别

    转载:http://blog.csdn.net/iloveyin/article/details/7965183 1.类的加载方式不同    在执行Class.forName("a.clas ...

  3. Spring-----事务配置的五种方式

    转载自:http://blog.csdn.net/hekewangzi/article/details/51712821

  4. 在 WinForm 中打开页面采用POST方式传参http。可以多个参数传递，返回json字符串

    //调用方法 Dictionary<string, string> postData = new Dictionary<string, string>(); postData. ...

  5. oracle中的初始化参数文件

    oracle初始化参数文件管理 oracle实例是指运行状态下的oracle软件,是由内存结构跟一些进程结构组成的,主要实现数据库的访问跟控制功能,是oracle的核心. 初始化参数文件是oracle ...

  6. 分享一个PHP调用RestFul接口的函数

    php越来越前端化,大型系统中的php经常是调用后端服务的接口,这里分享一个函数.希望对大家有用. /** * [http 调用接口函数] * @Date 2016-07-11 * @Author G ...

  7. Flask中endpoint的理解

    在flask框架中,我们经常会遇到endpoint这个东西,最开始也没法理解这个到底是做什么的.最近正好在研究Flask的源码,也就顺带了解了一下这个endpoint 首先,我们看一个例子: @app ...

  8. UML－类图，包图

    UML构造设计模型   一.类图  二.包图   三.组件图   四.部署图   一.类图     1.类:类由三格表示:类名,类的属性,类的操作              类名: 首字母大学     ...

  9. webstrom 常用快捷键

    最近在学习javascript,同时发现了一款非常好用的IDE webstrom 现在记录改IDE的快捷键 1. ctrl + shift + n: 打开工程中的文件,目的是打开当前工程下任意目录的文 ...

  10. 汽车总线obd模拟器，obd仿真器，ecu模拟器，obd开发测试工具，可以模拟ecu中的obd协议 MRD-5050

    汽车总线OBD模拟器MRD-5050型号是在车辆越来越趋于网络化的趋势下研发的,是汽车产品开发.调试.生产必备的工具,能为为开发人员节省大量的时间.当前车辆上的总线设备越来越多,有的高端车上甚至多到有 ...