动态生成表格,首先需要输入并获取动态的数字,html中结构代码如下:

行:<input type="text" id="row" value="5"><br>
    列:<input type="text" id="col" value="10"><br>
    <button id="btn">生成</button>
    <div id="box"></div> <!--存放动态生成的表格-->

    1
    2
    3
    4

html结构写好之后,我们就需要写js代码,让其动态生成表格。js代码如下:

$("#btn").onclick = function () {
            var _col = $("#col").value,//获取列
                _row = $("#row").value;//获取行
            var _table = document.createElement("table");//创建表格
            for(var i = 0;i<_row;i++){
                var _tr = document.createElement("tr");//创建行
                for(var j = 0;j<_col;j++){
                    var _td = document.createElement("td");//创建列
                    _tr.appendChild(_td);
                }
                _table.appendChild(_tr);
            }
            $("#box").appendChild(_table);//添加表格

更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/118599567

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

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

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

  2. JavaScript基础7——动态生成表格

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. js动态生成表格

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

  4. (转载)PHP 动态生成表格

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

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

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

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

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

  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. nacos集群模式搭建踩坑记录

    首先数据库使用的本地的mysql 1.看日志提示no set datasource,使用虚拟机ping本地后发现无法ping通,原因是本地没有关闭防火墙. 2.看日志提示不允许建立数据库连接,原因是r ...

  2. ajax - 终结篇jsonp,防抖节流

    今天是我们最后一天ajax的学习,这次学完总可以去vue了吧,我不信还有什么拦路石,先不说其他的先看看今天的内容. 1. 首先是同源策略,什么叫做同源? 如果两个页面的协议.域名.端口都相同的话,我们 ...

  3. 一致性Hash的原理与实现

    应用场景 在了解一致性Hash之前,我们先了解一下一致性Hash适用于什么场景,能解决什么问题?这里先放一下我自己认为适用的场景.一致性Hash适用于服务器动态扩展且需要负载均衡的场景 试想以下场景, ...

  4. IDEA小技巧:Markdown里的命令行可以直接运行了

    作为一名开发者,相信大部分人都喜欢用Markdown来写文章和写文档. 如果你经常用开源项目或者自己维护开源项目,肯定对于项目下的README文件也相当熟悉了吧,通常我们会在这里介绍项目的功能.如何使 ...

  5. android软件简约记账app开发day01-今日收支明细的界面绘制

    android软件简约记账app开发day01-今日收支明细的界面绘制 导入素材 导入在阿里iconfront图标库下载的字体图标分为大小两种,分别导入到项目目录mipmap-hdpi和mipmap- ...

  6. C3P0反序列化链学习

    C3P0 c3p0第一次听闻是用于fastjson的回显上,大佬们总结三种方法,后面两种主要就是用于fastjson和jackjson的回显利用(注入内存马) http base jndi hex序列 ...

  7. Navicat导出结果显示科学计数法(PostgreSQL)

    原因:在EXCEL录入数超过11位,就会变成科学记数法 解决方案: 在postgresql需要导出的列中加入制表符 示例: SELECT 6280920221390000000061:: TEXT | ...

  8. XCTF练习题---CRYPTO---wtc_rsa_bbq

    XCTF练习题---CRYPTO---wtc_rsa_bbq flag:flag{how_d0_you_7urn_this_0n?} 解题步骤: 1.观察题目,下载附件 2.下载后是一个文件,不清楚格 ...

  9. Mysql 连续时间分组

    该方案:不限于本例的时间连续,也可适用于其他按连续分组. 连续条件 分组这问题困扰了很久,之前觉得在SQL上很难处理,都是在程序上做处理.后面实在有太多这需求了,所以只能想办法在SQL上处理了. 如下 ...

  10. 【mq】从零开始实现 mq-03-引入 broker 中间人

    前景回顾 [mq]从零开始实现 mq-01-生产者.消费者启动 [mq]从零开始实现 mq-02-如何实现生产者调用消费者? [mq]从零开始实现 mq-03-引入 broker 中间人 上一节我们学 ...