javascript案例：动态生成表格

js案例：动态生成表格

一、文字梳理

* 创建一个页面：两个输入框和一个按钮

* 第一步：得到输入的行和列的值

* 第二步：生成表格

- 循环行

- 在行里面循环单元格

* 第三步：把表格（表格放到变量里面）显示到页面上（通过div.innerHTML）

二、代码展示

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title>
</head>
<body>行：<input type="text" id="line"/>列：<input type="text" id="row"/><br /><input type="button" value="生成" onclick="add()" /><div id="div1"></div><script type="text/javascript">function add() {//获取输入行和列var line1 = document.getElementById("line").value;var row1 = document.getElementById("row").value;//重点是把表格放到变量tab里面var tab = "<table border='1'>";for (var i = 0; i < line1; i++) {tab += "<tr>";for (var j = 0; j < row1; j++) {tab += "<td>zzyykk</td>";}tab += "</tr>";}tab+="</table>";var div1 = document.getElementById("div1");//得到div标签div1.innerHTML = tab;//把表格的代码设置到div里面}</script>
</body>
</html>

注意：代码直接复制过去有个bug，生成按钮的事件onclick的o形式变了

javascript案例：动态生成表格相关推荐

JavaScript网页——动态生成表格
1.创建学生数据分析:因为里面的学生数据都是动态的,我们需要js动态生成.这里我们模拟数据,自己定义好数据.数据我们采取对象形式存储. var students = [{name:'吕小布',sub ...
JavaScript中动态生成表格
1. 以下这个案例比较典型: 涉及到dom节点的操作,以及数组和对象的遍历方法题目要求: 使用数组把学生数据模拟出来. 动态创建行.单元格. 为单元格填充数据. 提供"删除"链 ...
利用Javascript动态生成表格的小demo
利用Javascript动态生成表格的小demo 利用Javascript中data数据库存储内容动态生成表格,点击删除可对整行内容进行删除 <!DOCTYPE html> <htm ...
JavaScript基础学习动态生成表格
JavaScript基础学习动态生成表格根据我们拥有的数据来动态创建表格的行和列,以及实现删除行的操作 <!DOCTYPE html> <html lang="en&q ...
WebAPI(part10)--动态生成表格
学习笔记,仅供参考,有错必究文章目录动态生成表格动态生成表格从本地取到数据,动态生成表格,并添加删除操作. 代码: <!DOCTYPE html> <html>< ...
django通过ajax请求接口返回多条数据，并动态生成表格，请求表单后将表格数据并入库
一.最近在做接口相关的开发,需求是这样的,通过一个接口所需要传递的参数,调用接口后,处理接口响应的参数,返回多条数据,并动态生成表格,请求表单后将表格的数据入库,下面是我改过的代码,跟实际代码有些出入 ...
js动态生成表格【含合并单元格的表格】
最近遇到需求,动态生成表格,类似Excel,支持合并单元格的表格,代码分享给大家~ 一.网上找到的简单生成表格的例子: 以下是生成规则表格m行*n列类似,可以直接打开HTML查看结果. <!DO ...
JSON格式化动态生成表格表格转置行列转换 Excel导出
先看效果初始化: JSON格式化 : 生成表格-方式1 : 生成表格-方式2 : Excel导出需要行求和.列求和功能的查看 JSON格式化动态生成表格表格转置行列转换 Excel导出行求 ...
一段动态生成表格的JSP代码讲解
一段动态生成表格的JSP代码讲解 <table border="1" width="600px" align="center"> ...

javascript案例：动态生成表格

js案例：动态生成表格

一、文字梳理

二、代码展示

javascript案例：动态生成表格相关推荐

最新文章

热门文章