<div>
        <h1>动态生成表格</h1>
        <div id="table1">
            行:<input type="text" id="h"/>
            列:<input type="text" id="l"/>
            <input type="button" value="生成" onclick="addTable();" />
            <div id="divt"></div>
        </div>
        
    </div>
    <script type="text/javascript">
        function addTable(){
                /*动态生成表格
                    1、得到输入的行和列的值
                    2、生成表格
                        循环行
                        在行里面循环单元格
                    3、显示到页面上
                        把表哥的代码设置到div里面
                        使用innerHTML属性
                */
            var h=document.getElementById("h").value;
            var l=document.getElementById("l").value;
            var divtab=document.getElementById("divt");
            //把表格代码放到一个变量里面
            var tab="<table border='solid'>";
            for(var i=0;i<h;i++){
                tab+="<tr>";
                for(var j=0;j<l;j++){
                    tab+="<td>";
                    tab+="aaaaa";
                    tab+="</td>";
                }
                tab +="</tr>";
                
            }
            tab+="</table>";
            divtab.innerHTML=tab;
        }
    </script>

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

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

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

  2. js动态生成表格

    动态生成表格           *创建一个页面:两个输入框和一个按钮 *代码和步骤                      /*                          1.得到输入的行 ...

  3. js 动态生成表格案例

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

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

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

  5. js动态生成数据列表

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

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

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

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

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

  8. JavaScript中动态生成表格

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

  9. JS动态生成的元素,其对应的方法不响应(比如单击事件,鼠标移动事件等)

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

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

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

随机推荐

  1. day26 Python isinstance和issubclass

    isinstance(obj,cls)检查是否obj是否是类 cls 的对象 issubclass(sub, super)检查sub类是否是 super 类的派生类 class Foo(object) ...

  2. ORA-27154: post/wait create failed ORA-27300 ORA-27301 ORA-27302

    今天刚装了Oracle 11g,配制好了之后启动数据库时遇到下面的错误:SQL> startupORA-27154: post/wait create failedORA-27300: OS s ...

  3. ORA-00600: internal error code, arguments: [2662]

    转自 http://www.eygle.com/archives/2005/12/oracle_diagnostics_howto_deal_2662_error.html 在ORA-00600 22 ...

  4. Emacs 中使用 shell

    直接在 Emacs 中使用 shell 能增加一点效率.Emacs 本身支持的 shell 相关的命令很多,此处化繁为简,只用一条足够了. M-x shell:将打开一个名为 * shell * 的 ...

  5. python libnum库安装使用方法

    libnum库是一个关于各种数学运算的函数库,它包含common maths.modular.modular squre roots.primes.factorization.ECC.converti ...

  6. Scala--模式匹配和样例类

    模式匹配应用场景:switch语句,类型查询,析构,样例类 一.更好的switch val ch :Char = '+' val sign = ch match{ case '+' => 1 c ...

  7. 使用C#创建SQLite控制台应用程序

    本文属于原创,转载请注明出处,谢谢! 一.开发环境 操作系统:Windows 10 X64 开发环境:VS2015 编程语言:C# .NET版本:.NET Framework 4.0 目标平台:X86 ...

  8. MySQL表结构变更,不可不知的Metadata Lock

    在线上进行DDL操作时,相对于其可能带来的系统负载,其实,我们最担心的还是MDL其可能导致的阻塞问题. 一旦DDL操作因获取不到MDL被阻塞,后续其它针对该表的其它操作都会被阻塞.典型如下,如阻塞稍久 ...

  9. 朱晔的互联网架构实践心得S2E1:业务代码究竟难不难写?

    注意,这是我的架构实践心得的第二季的系列文章,第一季有10篇你也可以回顾. 见https://www.cnblogs.com/lovecindywang/category/1296779.html 最 ...

  10. java 接口实现防盗门功能

    Door: package locker; public abstract class Door { public abstract void open(); public abstract void ...