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" ...
随机推荐
- FastDFS分布式的文件系统从小白入门到企业实践打怪之路系列笔记 【运维实践】
描述: FastDFS 是阿里的余庆大佬用 C 语言编写的一款开源的分布式文件系统(个人项目),它对文件进行管理.功能包括:文件存储.文件同步.文件访问(文件上传.文件下载)等,适合中小文件(4KB ...
- asp.net core + jenkins 实现自动化发布
由于部署个人博客系统的服务器只有2G内存,每次利用jenkins编译,发布的时候jenkins老是挂,因此新买了一台轻量应用服务器,专门用于个人博客系统的持续发布任务,下面讲解如何利用jenkins实 ...
- 2021.08.01 P3377 左偏树模板
2021.08.01 P3377 左偏树模板 P3377 [模板]左偏树(可并堆) - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) #include<iostream> ...
- DevExpress控件与VS和.NET各个版本的支持情况
如下图所示,绿色Yes代表支持,红色No代表不支持.对于有些人觉得装了dev后,vs工具箱没有,一般都是以下两大问题: 1.要么你的Dev的版本不支持你当前的VS版本,没有很正常. 2.要么你的项目的 ...
- python基础练习题(斐波那契数列)
day4 --------------------------------------------------------------- 实例006:斐波那契数列 题目 斐波那契数列. 题目没说清楚, ...
- [AcWing 771] 字符串中最长的连续出现的字符
点击查看代码 #include<iostream> using namespace std; string str; int n; int main() { cin >> n; ...
- 论文解读(IGSD)《Iterative Graph Self-Distillation》
论文信息 论文标题:Iterative Graph Self-Distillation论文作者:Hanlin Zhang, Shuai Lin, Weiyang Liu, Pan Zhou, Jian ...
- py文件加密打包成exe文件
python的py.pyc.pyo.pyd文件区别 py是源文件: pyc是源文件编译后的文件: pyo是源文件优化编译后的文件: pyd是其他语言写的python库: 为什么选用Cpython .p ...
- MindSpore尝鲜之爱因斯坦求和
技术背景 在前面的博客中,我们介绍过关于numpy中的张量网络的一些应用,同时利用相关的张量网络操作,我们可以实现一些分子动力学模拟中的约束算法,如LINCS等.在最新的nightly版本的MindS ...
- Python技法:实用运维脚本编写(进程/文件/目录操作)
Python在很大程度上可以对shell脚本进行替代.笔者一般单行命令用shell,复杂点的多行操作就直接用Python了.这篇文章就归纳一下Python的一些实用脚本操作. 1. 执行外部程序或命令 ...