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" ...
随机推荐
- Spring Cloud之负载均衡组件Ribbon原理分析
目录 前言 一个问题引发的思考 Ribbon的简单使用 Ribbon 原理分析 @LoadBalanced 注解 @Qualifier注解 LoadBalancerAutoConfiguration ...
- IO ——字节流
什么是流? 概念:内存与存储设备之间传输数据的通道.程序运行后保存在内存,文件一般在硬盘中,在程序中读写文件,需要在内存和存储设备中建立通道.数据借助流传输 流的分类: 按流向: 输入流:将存储设备中 ...
- k8s入门之pod(四)
pod是k8s项目中的最小编排单位,它是运行中的一组(一个或多个)容器,这些容器共享存储.网络.调度等资源,pod是一个逻辑概念,同一个名称空间下不同pod可以通过ip互相访问. 一.通过命令行方式管 ...
- vue-cli4 vue-config.js配置及其备注
// vue.config.js const path = require('path'); const CompressionWebpackPlugin = require("compre ...
- python学习-Day38-HTML
目录 前端 简介 什么是前端 什么是后端 前端特点 前端主要技术: 前端相关技能 关于 HTTP 的知识在这里 HTML 什么是HTML HTML 实例 实例解析 HTML 标签 HTML 元素 HT ...
- [AcWing 821] 跳台阶
点击查看代码 #include<iostream> using namespace std; int n, ans = 0; void f(int k) { if (k == n) ans ...
- vue3中的四种插槽的介绍-保证让你看看的明明白白!
插槽 当组件中只有一个插槽的时候,我们可以不设置 slot 的 name 属性. v-slot 后可以不带参数,但是 v-slot 在没有设置 name 属性的时候, 插槽口会默认为"def ...
- nodejs + typescript + koa + eslint + typescript eslint + prettier + webstorm
ESLint 安装 yarn add -D eslint 生成配置文件 yarn eslint --init cli 选项 How would you like to use ESLint? To c ...
- 认识并安装WSL
认识并安装WSL(基于Windows的Linux子系统) 什么是WSL WSL(Windows Subsystem for Linux),这是在windows平台运行的linux子系统.也就是说可是不 ...
- Springboot目录结构分析
1 src/main/java 存储源码 2 src/main/resource 资源文件夹 (1)src/main/resource/static 用于存放静态资源,如css.js.图片.文件 ...