动态生成表格,首先需要输入并获取动态的数字,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. 使用Harr特征的级联分类器实现目标检测

    前言  最近在学习人脸的目标检测任务时,用了Haar人脸检测算法,这个算法实现起来太简洁了,读入个.xml,调用函数就能用.但是深入了解我发现这个算法原理很复杂,也很优秀.究其根源,于是我找了好些篇相 ...

  2. 洛谷 P1162 填涂颜色 DFS

    P1162 填涂颜色 https://www.luogu.com.cn/problem/P1162 qaq搜索好抽象啊,蒟蒻表示难以理解,搞半天才做出来一道题,很挫败www 思路 染色法.找墙壁外的连 ...

  3. Go语言 文件操作

    @ 目录 引言 1. 打开和关闭文件 2. 读取文件 2.1 defer 语句 2.2 手动宕机处理 2.3 打开文件并获取内容 2.4 bufio 读取文件 2.5 ioutil 读取文件 2.6 ...

  4. Promql基础语法2

    数据样本 直方图类型 delta函数 运算操作 数学运算 node_disk_info / 100 当瞬时向量与标量之间进行数学运算时,数学运算符会依次作用域瞬时向量中的每一个样本值,从而得到一组新的 ...

  5. 【面试普通人VS高手系列】死锁的发生原因和怎么避免

    一个去阿里面试的小伙伴私信我说:今天被一个死锁的问题难到了. 平常我都特意看了死锁这块的内容,但是回答的时候就想不起来. 这里可能存在一个误区,认为技术是要靠记的. 大家可以想想,平时写代码的时候,这 ...

  6. 【Java分享客栈】一文搞定京东零售开源的AsyncTool,彻底解决异步编排问题。

    一.前言 本章主要是承接上一篇讲CompletableFuture的文章,想了解的可以先去看看案例: https://juejin.cn/post/7091132240574283813 Comple ...

  7. WIN10 使用POWERSHELL 设置单应用KIOSK模式(win10家庭版或企业版)

    win10 使用PowerShell 设置单应用kiosk模式 win10 家版或企业版PowerShellshell 启动器 v1Autologon.exe 注意事项 win10 家庭版或企业版. ...

  8. python 本地配置文件库 Dynaconf 简介

    [前言] 在项目中经常会遇到以下几种需要用到配置文件的场景: 相同的配置参数用在不同的代码中,如果需要调整,则需要手动将各个使用到的地方都相应调整. 密码等信息不想硬编码在项目文件中. 配置文件的格式 ...

  9. 一文彻底搞懂MySQL分区

    一个执着于技术的公众号 一.InnoDB逻辑存储结构 首先要先介绍一下InnoDB逻辑存储结构和区的概念,它的所有数据都被逻辑地存放在表空间,表空间又由段,区,页组成. 段 段就是上图的segment ...

  10. C++进阶-3-5-list容器

    C++进阶-3-5-list容器 1 #include<iostream> 2 #include<list> 3 #include<algorithm> 4 usi ...