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" ...
随机推荐
- Water 2.5.9 发布,一站式服务治理平台
Water(水孕育万物...) Water 为项目开发.服务治理,提供一站式解决方案(可以理解为微服务架构支持套件).基于 Solon 框架开发,并支持完整的 Solon Cloud 规范:已在生产环 ...
- 记录,element ui的日期选择器只有第一次回显成功
首先是这个 <el-date-picker v-model="value1" type="daterange" range-separator=" ...
- 2021.07.17 题解 CF1385E Directing Edges(拓扑排序)
2021.07.17 题解 CF1385E Directing Edges(拓扑排序) CF1385E Directing Edges - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) ...
- ASP.NET Core 6.0 添加 JWT 认证和授权
序言 本文将分别介绍 Authentication(认证) 和 Authorization(授权). 并以简单的例子在 ASP.NET Core 6.0 的 WebAPI 中分别实现这两个功能. 相关 ...
- Em 和 Rem 的基本使用
1. Em html 结构 <div id="box-1"> <h3>Box One</h3> <p> Lorem ipsum do ...
- ASP.NETCore统一处理404错误都有哪些方式?
当未找到网页并且应用程序返回 404 错误时,ASP.NET Core MVC 仅呈现通用浏览器错误页面,如下图所示 这不是很优雅,是吗? 我们平时看到的404页面一般是这样的 还有这样的 试了下京东 ...
- selenium模块跳过用户名密码验证码输入,加载浏览器标签和cookie,进行翻页爬虫多页动态加载的数据(js)
能解决登陆一次后,之后不需要二次登陆的动态加载数据,网页保存的cookie和标签,加入到selenium自动化测试浏览器中 1 from selenium import webdriver 2 imp ...
- kali 更换国内源
打开source源 vim /etc/apt/sources.list 没有权限进行更改 获取root 权限 按 i 提示内容: E325: 注意 发现交换文件 "/var/tmp/sour ...
- vue build 指定环境
前言 其实很简单的东西,搜索时很是费劲,特此记录下来.网上有很多资料,但都是五花八门,特此记录 使用 项目根目录中创建环境变量使用文件 .env #所有环境都会加载 .env.development ...
- WorkCount
此项目码云链接 软件测试方法和技术第二次作业 1 作业内容 根据WordCount的需求描述,先编程实现,再编写单元测试,最后撰写博客.至少完成需求中的基本功能. 2 WordCount需求说明 Wo ...