动态生成表格,首先需要输入并获取动态的数字,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. Java-GUI编程之菜单组件

    前面讲解了如果构建GUI界面,其实就是把一些GUI的组件,按照一定的布局放入到容器中展示就可以了.在实际开发中,除了主界面,还有一类比较重要的内容就是菜单相关组件,可以通过菜单相关组件很方便的使用特定 ...

  2. Leetcode78/90/491之回溯中的子集问题

    回溯之子集问题 子集问题和组合问题特别像 Leetcode78-子集 给你一个整数数组 nums ,数组中的元素 互不相同 .返回该数组所有可能的子集(幂集) 解集 不能 包含重复的子集.你可以按 任 ...

  3. zabbix proxy cannot perform check now for itemid [xxxxx]: item is not in cache

    情况 接上次做完容器部署proxy后,为其添加host进行添加任务. 发现一直没有数据,就到item里面执行 execute now. 然后过了几分钟回来一看,还是没有. Emmm,看下log吧. S ...

  4. Google kickstart 2022 Round A题解

    Speed Typing 题意概述 给出两个字符串I和P,问能否通过删除P中若干个字符得到I?如果能的话,需要删除字符的个数是多少? 数据规模 \[1≤|I|,|P|≤10^5 \] 双指针 设置两个 ...

  5. python-django搭建页面步骤

    一.配置环境1.file>>New project 创建文件名,配置python.exe执行路径2.setting.py配置①建立static文件夹,最后一行添加STATICFILES_D ...

  6. springmvc-02(配置版与注解版区别)

    首先,我们来看配置版和注解版的相同步骤: 1.新建一个Moudle , springmvc-02-hello , 添加web的支持! 2.确定导入了SpringMVC 的依赖! 3.配置web.xml ...

  7. css3 做出顶边倾斜的 梯形 div

    效果图: <html> <head> <meta charset="utf-8"> <title>顶边倾斜的div梯形</ti ...

  8. vue下一代状态管理Pinia.js 保证你看的明明白白!

    1.pinia的简单介绍 Pinia最初是在2019年11月左右重新设计使用Composition API的 Vue 商店外观的实验. 从那时起,最初的原则相同,但 Pinia 适用于 Vue 2 和 ...

  9. 架构师必备:Redis的几种集群方案

    结论 有以下几种Redis集群方案,先说结论: Redis cluster:应当优先考虑使用Redis cluster. codis:旧项目如果仍在使用codis,可继续使用,但也推荐迁移到Redis ...

  10. Kubernetes生产环境最佳实践

    点击上方"开源Linux",选择"设为星标" 回复"学习"获取独家整理的学习资料! 众所周知,Kubernetes很难! 以下是在生产中使用 ...