<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. 20175330 2018-2019-2 《Java程序设计》第八周学习总结

    # **教材学习内容总结### 本周学习<Java程序设计>第十五章:*** 泛型: 泛型(Generics)的主要目的是可以建立具有类型安全的集合框架,如链表.散列映射等数据结构.泛型类 ...

  2. face detection[CNN casade]

    本文是基于< A convolutional neural network cascade for face detection>的解读,所以时间线是2015年. 0 引言 人脸检测是CV ...

  3. Windows下安装RabbitMQ报错:unable to perform an operation on node时的解决方案

    在计算机领域中,想要程序完成各种功能,那么数据的交流和计算是非常重要的.现在已知的程序动作机制有协程,线程和进程. 在同一个程序中,或者说同一个进程中,数据的交流,传递,计算是非常的简单,只要把相关数 ...

  4. ASP.NET Core 与支付宝开发文档

    一.目录 ASP.NET Core 2.0 使用支付宝PC网站支付 ASP.NET Core 2.0 支付宝当面付之扫码支付 常见使用问题解答 已有多个公司数个项目用本组件并上线,稳定使用. 二.项目 ...

  5. FineUIMvc新特性速递(大间距模式,隐藏菜单垂直滚动条)

    即将发布的 FineUIMvc 新版本会引入两个重要的特性,用来提升用户体验,现在就来先睹为快吧: 大间距模式 我们已经支持的显示模式有:紧凑模式,普通模式,大字体模式. 紧凑模式: 普通模式: 大字 ...

  6. 史上最全面的Neo4j使用指南

    Neo4j图形数据库教程 Neo4j图形数据库教程 第一章:介绍 Neo4j是什么 Neo4j的特点 Neo4j的优点 第二章:安装 1.环境 2.下载 3.开启远程访问 4.测试 第三章:CQL 1 ...

  7. [翻译] C# 8.0 新特性

    原文: Building C# 8.0 [译注:原文主标题如此,但内容大部分为新特性介绍,所以意译标题为 "C# 8.0 新特性"] C# 的下一个主要版本是 8.0.我们已经为它 ...

  8. List,DataTable实现行转列的通用方案

    最近在做报表统计方面的需求,涉及到行转列报表.根据以往经验使用SQL可以比较容易完成,这次决定挑战一下直接通过代码方式完成行转列.期间遇到几个问题和用到的新知识这里整理记录一下. 阅读目录 问题介绍 ...

  9. Django的model form组件

    前言 首先对于form组件通过全面的博客介绍,对于form我们应该知道了它的大致用法,这里我们需要明确的一点是,我们定义的form与model其实没有什么关系,只是在逻辑上定义form的时候字段名期的 ...

  10. public private protected default小结

    public:可以被所有其他类所访问: private:只能被自己访问和修改: protected:自身.子类及同一个包中类可以访问: default:声明时没有加修饰符,同一包中的类可以访问:当子类 ...