<!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. Postman—cookie

    postman中可以直接添加cookie.查看响应中的cookie: 什么是cookie HTTP协议本身是无状态的.什么是无状态呢,即服务器无法判断用户身份.Cookie实际上是一小段的文本信息(k ...

  2. Internet History, Technology, and Security（week3）——History: The Web Makes it Easy to Use

    前言: 上周学习了第一个网络NSFnet,美国国家科学基金会(National Science Foundation,简称NSF)在全美国建立了6个超级计算机中心所互联的一个网络,这周继续学习网络的发 ...

  3. mysq访问方式

    mysql -h10.81.32.196 -P5152 -Dns_map_data_new -uwangyuchuan_r -p3DLg15rhSsm0O7Nsselect uid,name from ...

  4. 图解SQLSERVER联合查询和连接查询的区别

      相信很多人都会用SQLSERVER联合查询和连接查询,但是用起来不一定都得心应手,对于其中的原理可能就模糊不清了,要想很牢固地掌握和运用SQL联合查询和连接查询机制,必须对其根本原理有很清晰认识, ...

  5. sqlserver 查询当前阻塞进程 并杀掉

    select * from master.dbo.sysprocesses where DB_NAME(dbid)=’test’ and spid<>@@SPID 看看阻塞的进程 然后ki ...

  6. python开发环境准备

    python 以版本众多,包之间依赖复杂而著称,所以一个趁手的开发环境还是很有必要的. 我的建议是用Anaconda做环境隔离.包管理,PyCharm做项目开发,jupyter做笔记,ipython和 ...

  7. kill的各种讯号？

    kill 程序 不仅仅只是k掉某个进程, 她还有很多作用和用途. 其实, 这也是linux的程序的一个特点: 一个程序(很多是 命令行的程序), 除了主要的作用外, 还有很多" 重要的, 有 ...

  8. centos修改时区，同步时间

    查看当前系统时区 ls -la /etc/localtime 查看支持的时区 timedatectl list-timezones # 查看所有时区 timedatectl list-timezone ...

  9. ubuntu 安装 rocketmq

    1.安装 rocketmq首先要有java以及maven环境,这里略过,可参考 https://www.cnblogs.com/xiaobaoTribe/p/11315011.html  安装JDK ...

  10. FutureTask的用法以及两种常用的使用场景

    参考博客:https://blog.csdn.net/linchunquan/article/details/22382487 FutureTask可用于异步获取执行结果或取消执行任务的场景.通过传入 ...