动态生成表格
           *创建一个页面：两个输入框和一个按钮

*代码和步骤
                      /*
                          1、得到输入的行和列的值
                          2、生成表格
                               ** 循环行
                               ** 在行里面循环单元格
                          3、显示到页面上
                                    - 把表格的代码设置到div里面
                                    - 使用innerHTML属性
                     */
                      //获取输入的行和列
                          var h = document.getElementById("h").value;
                          var l = document.getElementById("l").value;

//把表格代码放到一个变量里面
                         var tab = "<table border='1' bordercolor='blue'>";
                    //循环行
                          for(var i=1;i<=h;i++) {
                                    tab += "<tr>";
                                     //循环单元格
                                    for(var j=1;j<=l;j++) {
                                               tab += "<td>aaaaaaa</td>"
                                    }
                                    tab += "</tr>";
                          }

tab += "</table>";

//alert(tab);
                       //得到div标签
                       var divv = document.getElementById("divv");
                        //把table的代码设置到div里面去
                       divv.innerHTML = tab;
                         }

<body>

    行：<input type="text" id="h" />

    列：<input type="text" id="l" />

    <br/>

    <input type="button" value="生成" onclick="add2();"/>

    <div id="divv">

    </div>

    <script type="text/javascript">

        function add2() {

            /*

                1、得到输入的行和列的值

                2、生成表格

                    ** 循环行

                    ** 在行里面循环单元格

                3、显示到页面上

                    - 把表格的代码设置到div里面

                    - 使用innerHTML属性

            */

            //获取输入的行和列

            var h = document.getElementById("h").value;

            var l = document.getElementById("l").value;

            //把表格代码放到一个变量里面

            var tab = "<table border='1' bordercolor='blue'>";

            //循环行

            for(var i=1;i<=h;i++) {

                tab += "<tr>";

                //循环单元格

                for(var j=1;j<=l;j++) {

                    tab += "<td>aaaaaaa</td>"

                }

                tab += "</tr>";

            }

            tab += "</table>";

            //alert(tab);

            //得到div标签

            var divv = document.getElementById("divv");

            //把table的代码设置到div里面去

            divv.innerHTML = tab;

        }

    </script>

 </body>

js动态生成表格的更多相关文章

  1. JS动态生成表格后 合并单元格

    JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单 ...

  2. js 动态生成表格案例

    <1>布局:一个table表格,表格分为两个部分,上面是thead表头,表头里面仅一行,有4列(th),   下面是tbody表格内容,要求tbody中的每一行都是用js动态创建的 < ...

  3. 利用JS动态生成隔行换色HTML表格

    用JS生成动态生成表格,行.列由用户输入,并使表格隔行换色 方法一. 代码: <!DOCTYPE html> 2 <html> 3 <head> 4 <tit ...

  4. js动态生成数据列表

    我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js ...

  5. js动态添加-表格逐行添加、删除、遍历取值

    关于js对表格进行逐行添加,今天抽空整理了一下:新建一个html文件(没有编辑器的可以新建一个demo.txt文件,然后改后缀名为demo.html),把下面代码全部贴进去即可.功能包括:表格添加一行 ...

  6. 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理

    编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...

  7. JavaScript中动态生成表格

    动态生成表格,首先需要输入并获取动态的数字,html中结构代码如下:行:<input type="text" id="row" value="5 ...

  8. JS动态生成的元素，其对应的方法不响应（比如单击事件，鼠标移动事件等）

    主要原因:在页面给元素注册点击事件的时候[ $(function () {  XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...

  9. 抓取Js动态生成数据且以滚动页面方式分页的网页

    代码也可以从我的开源项目HtmlExtractor中获取. 当我们在进行数据抓取的时候,如果目标网站是以Js的方式动态生成数据且以滚动页面的方式进行分页,那么我们该如何抓取呢? 如类似今日头条这样的网 ...

随机推荐

  1. Mysql将近两个月的记录合并为一行显示

    最近做报表统计,用到要求把近两个月的绩效作比较,并作出一些环比数据等. 场景:将1班同学的两个月的语文的平均成绩合并到一行比较. CREATE TABLE `Chinese_score` ( `id` ...

  2. JVM学习笔记：JVM的体系结构与JVM的生命周期

    1 JVM在java平台中的位置 1.1 Java平台组成 Java平台主要由Java虚拟机和Java API这两部分组成.参考Oracle官网. 1.2 java平台结构图 JDK1.2开始,迫于J ...

  3. Leetcode 132. Palindrome Partitioning II

    求次数的问题一般用DP class Solution(object): def minCut(self, s): """ :type s: str :rtype: int ...

  4. 【BZOJ-2502】清理雪道 有上下界的网络流（有下界的最小流）

    2502: 清理雪道 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 594  Solved: 318[Submit][Status][Discuss] ...

  5. MapReduce实现二度好友关系

    一.问题定义 我在网上找了些,关于二度人脉算法的实现,大部分无非是通过广度搜索算法来查找,犹豫深度已经明确了2以内:这个算法其实很简单,第一步找到你关注的人:第二步找到这些人关注的人,最后找出第二步结 ...

  6. css后代选择器（div.class中间不带空格）

    如果我要查找<div>上用了.class的元素,查找方法:div.class:中间是不空格的. 以上这种形式为css后代选择器 参考:http://www.w3school.com.cn/ ...

  7. USACO 3.4 Electric Fence 皮克定理

    题意:在方格纸上画出一个三角形,求三角形里面包含的格点的数目 因为其中一条边就是X轴,一开始想的是算出两条边对应的数学函数,然后枚举x坐标值求解.但其实不用那么麻烦. 皮克定理:给定顶点坐标均是整点( ...

  8. JSTL——formatNumber标签

    使用场合: <fmt:formatNumber>标签用于格式化数字,百分比,货币 属性: 语法 如果使用pattern属性.这个属性可以让您在对数字编码时包含指定的字符.接下来的表格中列出 ...

  9. HDU #5733 tetrahedron

    tetrahedron 传送门 Time Limit: 2000/1000 MS (Java/Others)   Memory Limit: 65536/65536 K (Java/Others) P ...

  10. HTML5系列四（特征检测、Modernizr.js的相关介绍）

    Modernizr:一个HTML5特征检测库 Modernizr帮助我们检测浏览器是否实现了某个特征,如果实现了那么开发人员就可以充分利用这个特征做一些工作 Modernizr是自动运行的,无须调用诸 ...