JavaScript中动态生成表格
动态生成表格,首先需要输入并获取动态的数字,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中动态生成表格的更多相关文章
- 【转】ASP.NET中服务器控件Table动态生成表格及其属性介绍
下文所有内容转自开源中国:http://www.oschina.net/question/565065_86453#tags_nav ================================= ...
- JavaScript基础7——动态生成表格
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- js动态生成表格
动态生成表格 *创建一个页面:两个输入框和一个按钮 *代码和步骤 /* 1.得到输入的行 ...
- (转载)PHP 动态生成表格
(转载)http://hi.baidu.com/shawns/item/c7d51f351c6a0482b711dba6 提要:PHP能够高效地生成HTML代码,其中,动态生成表格是实际应用中经常碰到 ...
- JS动态生成表格后 合并单元格
JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单 ...
- 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理
编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...
- 动态生成表格呈现还是将表格直接绑定gridview等控件呈现的开发方式选择依据
动态生成表格呈现还是将表格直接绑定gridview等控件呈现的开发方式选择依据:由存储过程决定,如果编写的存储过程可以生成需要呈现的表格则直接绑定,否则要动态生成表格
- vue+element创建动态的form表单.以及动态生成表格的行和列
动态创建form表单,网上有插件 (form-create) 不过我不知道它怎么用,没有使用成功,如果你使用成功了,欢迎下方留言. 最后我使用了笨方法,针对各个表单写好通用的组件,然后根据type用v ...
- javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行
jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...
随机推荐
- 使用Harr特征的级联分类器实现目标检测
前言 最近在学习人脸的目标检测任务时,用了Haar人脸检测算法,这个算法实现起来太简洁了,读入个.xml,调用函数就能用.但是深入了解我发现这个算法原理很复杂,也很优秀.究其根源,于是我找了好些篇相 ...
- 洛谷 P1162 填涂颜色 DFS
P1162 填涂颜色 https://www.luogu.com.cn/problem/P1162 qaq搜索好抽象啊,蒟蒻表示难以理解,搞半天才做出来一道题,很挫败www 思路 染色法.找墙壁外的连 ...
- Go语言 文件操作
@ 目录 引言 1. 打开和关闭文件 2. 读取文件 2.1 defer 语句 2.2 手动宕机处理 2.3 打开文件并获取内容 2.4 bufio 读取文件 2.5 ioutil 读取文件 2.6 ...
- Promql基础语法2
数据样本 直方图类型 delta函数 运算操作 数学运算 node_disk_info / 100 当瞬时向量与标量之间进行数学运算时,数学运算符会依次作用域瞬时向量中的每一个样本值,从而得到一组新的 ...
- 【面试普通人VS高手系列】死锁的发生原因和怎么避免
一个去阿里面试的小伙伴私信我说:今天被一个死锁的问题难到了. 平常我都特意看了死锁这块的内容,但是回答的时候就想不起来. 这里可能存在一个误区,认为技术是要靠记的. 大家可以想想,平时写代码的时候,这 ...
- 【Java分享客栈】一文搞定京东零售开源的AsyncTool,彻底解决异步编排问题。
一.前言 本章主要是承接上一篇讲CompletableFuture的文章,想了解的可以先去看看案例: https://juejin.cn/post/7091132240574283813 Comple ...
- WIN10 使用POWERSHELL 设置单应用KIOSK模式(win10家庭版或企业版)
win10 使用PowerShell 设置单应用kiosk模式 win10 家版或企业版PowerShellshell 启动器 v1Autologon.exe 注意事项 win10 家庭版或企业版. ...
- python 本地配置文件库 Dynaconf 简介
[前言] 在项目中经常会遇到以下几种需要用到配置文件的场景: 相同的配置参数用在不同的代码中,如果需要调整,则需要手动将各个使用到的地方都相应调整. 密码等信息不想硬编码在项目文件中. 配置文件的格式 ...
- 一文彻底搞懂MySQL分区
一个执着于技术的公众号 一.InnoDB逻辑存储结构 首先要先介绍一下InnoDB逻辑存储结构和区的概念,它的所有数据都被逻辑地存放在表空间,表空间又由段,区,页组成. 段 段就是上图的segment ...
- C++进阶-3-5-list容器
C++进阶-3-5-list容器 1 #include<iostream> 2 #include<list> 3 #include<algorithm> 4 usi ...