Js--动态生成表格
<div>
<h1>动态生成表格</h1>
<div id="table1">
行:<input type="text" id="h"/>
列:<input type="text" id="l"/>
<input type="button" value="生成" onclick="addTable();" />
<div id="divt"></div>
</div>
</div>
<script type="text/javascript">
function addTable(){
/*动态生成表格
1、得到输入的行和列的值
2、生成表格
循环行
在行里面循环单元格
3、显示到页面上
把表哥的代码设置到div里面
使用innerHTML属性
*/
var h=document.getElementById("h").value;
var l=document.getElementById("l").value;
var divtab=document.getElementById("divt");
//把表格代码放到一个变量里面
var tab="<table border='solid'>";
for(var i=0;i<h;i++){
tab+="<tr>";
for(var j=0;j<l;j++){
tab+="<td>";
tab+="aaaaa";
tab+="</td>";
}
tab +="</tr>";
}
tab+="</table>";
divtab.innerHTML=tab;
}
</script>
Js--动态生成表格的更多相关文章
- JS动态生成表格后 合并单元格
JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单 ...
- js动态生成表格
动态生成表格 *创建一个页面:两个输入框和一个按钮 *代码和步骤 /* 1.得到输入的行 ...
- js 动态生成表格案例
<1>布局:一个table表格,表格分为两个部分,上面是thead表头,表头里面仅一行,有4列(th), 下面是tbody表格内容,要求tbody中的每一行都是用js动态创建的 < ...
- 利用JS动态生成隔行换色HTML表格
用JS生成动态生成表格,行.列由用户输入,并使表格隔行换色 方法一. 代码: <!DOCTYPE html> 2 <html> 3 <head> 4 <tit ...
- js动态生成数据列表
我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js ...
- js动态添加-表格逐行添加、删除、遍历取值
关于js对表格进行逐行添加,今天抽空整理了一下:新建一个html文件(没有编辑器的可以新建一个demo.txt文件,然后改后缀名为demo.html),把下面代码全部贴进去即可.功能包括:表格添加一行 ...
- 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理
编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...
- JavaScript中动态生成表格
动态生成表格,首先需要输入并获取动态的数字,html中结构代码如下:行:<input type="text" id="row" value="5 ...
- JS动态生成的元素,其对应的方法不响应(比如单击事件,鼠标移动事件等)
主要原因:在页面给元素注册点击事件的时候[ $(function () { XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...
- 抓取Js动态生成数据且以滚动页面方式分页的网页
代码也可以从我的开源项目HtmlExtractor中获取. 当我们在进行数据抓取的时候,如果目标网站是以Js的方式动态生成数据且以滚动页面的方式进行分页,那么我们该如何抓取呢? 如类似今日头条这样的网 ...
随机推荐
- ubuntu查看安装的pytorch/cuda版本
使用命令: user@home:~$ python Python |Anaconda custom (-bit)| ( , ::) [GCC ] on linux Type "help&qu ...
- Spring Security(六):2.3 Release Numbering
It is useful to understand how Spring Security release numbers work, as it will help you identify th ...
- Sharding-JDBC实践(一)简介
转载自:ShardingSphere官网 目录 一.介绍 1. Sharding-JDBC 2. Sharding-Proxy 3. Sharding-Sidecar(TBD) 4. 混合架构 二.功 ...
- [Spark][kafka]kafka 的topic 创建和删除试验
kafka 的topic 创建和删除试验 zookeeper和kafka 的安装,参考: http://www.cnblogs.com/caoguo/p/5958608.html 参考上述URL后,在 ...
- SpringBoot集成Freemarker与Thymeleaf
一:概括 pom.xml添加依赖 配置application.yml HTML页面使用表达式 二:Freemarker模板引擎 1.添加依赖 <!-- ftl模板引擎 --> <de ...
- Nginx+keepalived高可用配置实战(内附彩蛋)
1.整体架构图如下 2.环境准备 今天所配置的是keepalived+nginx 的负载均衡 下载keepalived软件 [root@LB01 tools]# wget http://www.kee ...
- 比官方文档更易懂的Vue.js教程!包你学会!
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由蔡述雄发表于云+社区专栏 蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师.智图图片优化系统首席工程师,曾参与<众妙之门> ...
- 便于记忆的SA构造
首先学习基数排序. memset(b, 0, sizeof(b)); for(int i = 0; i < n; i++) b[a[i]]++; for(int i = 1; i <= m ...
- c++入门之再话内存和引用
此处没有代码,仅仅讨论一些这样的问题:我们为何使用引用?在哪里使用引用? 首先从函数的角度思考?:函数进行一般参数传递的时候,是怎么样传递的?普通类型的参数传递,是将传递的实参复制一份,到另一个内存空 ...
- os.path 下的各方法
一.os.path os.path.abspath(file) #拿到当前程序(文件)的绝对目录. os.path.split(pathname) # 返回一个元组,第零个元素为文件上级绝对目录,第一 ...