<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>动态生成表格</title>

     </head>

     <body>

         行：<input type="text" id="row">

         列：<input type="text" id="col">

         <br />

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

         <br />

         <div id="container"></div>

     </body>

     <script type="text/javascript">

         function createTable() {

             // 获取行和列

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

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

             // 获取放置表格的容器

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

             // 生成表格

             var tab = "<table border='1' width='100%'>";

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

                 tab += "<tr align='center'>";

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

                     tab += "<td>" + j + "</td>";

                 }

                 tab += "</tr>";

             }

             tab += "</table>";

             container.innerHTML = tab;

         }

     </script>

 </html>

JavaScript基础7——动态生成表格的更多相关文章

  1. JavaScript中动态生成表格

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

  2. js动态生成表格

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

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

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

  4. 【转】ASP.NET中服务器控件Table动态生成表格及其属性介绍

    下文所有内容转自开源中国:http://www.oschina.net/question/565065_86453#tags_nav ================================= ...

  5. （转载）PHP 动态生成表格

    (转载)http://hi.baidu.com/shawns/item/c7d51f351c6a0482b711dba6 提要:PHP能够高效地生成HTML代码,其中,动态生成表格是实际应用中经常碰到 ...

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

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

  7. 动态生成表格呈现还是将表格直接绑定gridview等控件呈现的开发方式选择依据

    动态生成表格呈现还是将表格直接绑定gridview等控件呈现的开发方式选择依据:由存储过程决定,如果编写的存储过程可以生成需要呈现的表格则直接绑定,否则要动态生成表格

  8. vue+element创建动态的form表单.以及动态生成表格的行和列

    动态创建form表单,网上有插件 (form-create) 不过我不知道它怎么用,没有使用成功,如果你使用成功了,欢迎下方留言. 最后我使用了笨方法,针对各个表单写好通用的组件,然后根据type用v ...

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

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

随机推荐

  1. Shell-04

    grep程序 Linux下文本处理三剑客-----grep sed awk sed:文本行编辑器(流编辑器)        awk:报告生成器(文本输出格式化)         grep:文本行过滤工 ...

  2. vim插件cscope使用方法

    一.安装cscope 安装方式比较多样,可以在各自linux软件管理工具中安装,也可以去官网下载安装. sudo apt-get install cscope 二.插件安装 这里选择的是Vundle来 ...

  3. BZOJ 3319: 黑白树 并查集 + 离线 + 思维

    Description 给定一棵树,边的颜色为黑或白,初始时全部为白色.维护两个操作: 1.查询u到根路径上的第一条黑色边的标号. 2.将u到v    路径上的所有边的颜色设为黑色. Notice:这 ...

  4. 【Java】SpringBoot整合RabbitMQ

    介绍 RabbitMQ 即一个消息队列,主要是用来实现应用程序的异步和解耦,同时也能起到消息缓冲,消息分发的作用. RabbitMQ是实现AMQP(高级消息队列协议)的消息中间件的一种,AMQP,即A ...

  5. kohana学习经验

    1.sql查询文件缓存使用 $tokens = DB::select('id', 'token') ->from('member') ->where('id', 'in', $users) ...

  6. 3D Computer Grapihcs Using OpenGL - 04 First Triangle

    本节将绘制一个三角形 先看最终代码: MyGlWindow.cpp: #include <gl\glew.h> #include "MyGlWindow.h" void ...

  7. Xcode Server持续集成

    这是一篇2017-11-12 年我还在 ezbuy 的一篇文章,时间过去很早了,最近在整理笔记的时候发现了, 同步过来,文章内容现在是否有效不确定,应该大差不差,读者仅做参考 最后更新 2017-11 ...

  8. [CSP-S模拟测试]:梦境（贪心+小根堆）

    题目描述 智者奥尔曼曾说过:有缘的人即使相隔海角天涯,也会在梦境中相遇. $IcePrince\text{_}1968$和$IcePrincess\text{_}1968$便是如此.有一天$IcePr ...

  9. 北风设计模式课程---访问者（Visitor）模式

    北风设计模式课程---访问者(Visitor)模式 一.总结 一句话总结: 设计模式是日常问题的经验总结方案,所以学好设计模式对日常出现的问题可以有很好的解决. 访问者设计模式有点神似 抽象工厂模式, ...

  10. 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第2节 匿名对象_6-匿名对象的说明

    没有名字的对象,叫做匿名对象 新建一个Person类 把赵又廷赋值交给匿名对象Person里面的成员变量name 想调用里面的ShowName的话 还需要再定义一个匿名对象. 第三个对象是一个全新的. ...