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" ...
随机推荐
- linux磁盘之lsblk命令
lsblk命令可以显示很多跟磁盘相关分区.所属关系以及lvm的重要信息,所以这个命令最好掌握.lsblk命令默认情况下将以树状列出所有块设备,包括查看磁盘挂载信息.lsblk命令包含在util-lin ...
- Java学习——数组的基础知识
数组的特点.分类:一维.二维数组的使用:数组的声明和初始化.调用数组的指定位置的元素.获取数组的长度.遍历数组.数组元素的默认初始化值
- JAVA 进程线程详解
线程和进程 一.进程 进程是指运行中的程序,比如我们使用QQ,就启动该进程分配内存空间. 进程是程序的一次执行过程,或是正在运行的一个程序.是一个动态的过程:有它自升的产生,存在和消亡的过程 二.线程 ...
- 最强Postman替代品,国产软件Apifox到底有对牛?
作为软件开发从业者,API 调试是必不可少的一项技能,在这方面 Postman 做的非常出色.但是在整个软件开发过程中,API 调试只是其中的一部分,还有很多事情 Postman 无法完成,或者无法高 ...
- 3种方法改变this的指向
<body> <div style="width: 200px;height: 200px;hotpink;"></div> & ...
- android软件简约记账app开发day03-自定义键盘的书写
android软件简约记账app开发day03-自定义键盘的书写 我们在fragment界面使用了自定义的keybroad键盘,所以今天我们来书写自定义的键盘代码 新建util包,新建keyboard ...
- Bugku CTF练习题---分析---flag被盗
Bugku CTF练习题---分析---flag被盗 flag:flag{This_is_a_f10g} 解题步骤: 1.观察题目,下载附件 2.下载的文件是一个数据包,果断使用wireshark打开 ...
- 拖动元素调换位置——sortable.js
使用简介: https://github.com/SortableJS/Sortable https://segmentfault.com/a/1190000008209715 /**! * Sort ...
- .NET混合开发解决方案13 自定义WebView2中的上下文菜单
系列目录 [已更新最新开发文章,点击查看详细] WebView2控件应用详解系列博客 .NET桌面程序集成Web网页开发的十种解决方案 .NET混合开发解决方案1 WebView2简介 .NE ...
- 使用CSS实现《声生不息》节目Logo
声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 <声生不息> 是芒果TV.香港电视广播有限公司和湖南卫视联合推 ...