js 动态生成表格案例
<1>布局：一个table表格，表格分为两个部分，上面是thead表头，表头里面仅一行，有4列（th), 下面是tbody表格内容，要求tbody中的每一行都是用js动态创建的
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead> <tbody> </tbody>
</table>
</body>
<2>样式
<style>
*{
padding:;
margin:;
}
table{
width:500px;
margin:100px auto;
border-collapse:collapse;/*边框合并模式*/
text-align:center;
}
td,th{ /*td是后面tbody中动态创建的单元格，th是thead里面那一行中的单元格*/
border:1px solid #;
}
thead tr{
height:40px;
background-color: #cccccc;
}
<3>js动态创建表格：
第一步：先准备数据，一共有三个人的成绩，作为三个对象放进数组中
var datas=[{
name:"甲",
subject:"javascript",
score:
},{
name:"乙",
subject:"javascirpt",
score:
},{
name:"丙",
subject:"javascript",
score:
}];
第二步：在tbody里面创建每一行，行数就等于datas数组的长度，有几个人的成绩就有几行
for(var i=;i<datas.length;i++)
{
var tr=document.createElement("tr");
tbody.appendChild(tr);
}
第三步：在已经创建好的行 tr 中，创建单元格, 注意是跟数据有关的三个单元格，td单元格的数量取决于datas[ ] 数组中每个对象的属性个数
for(var i=;i<datas.length;i++)
{
var tr=document.createElement("tr");
tbody.appendChild(tr);
for(var k in datas[i])
{
var td=document.createElement("td");
tr.appendChild(td);
td.innerHTMl=datas[i][k];
}
}
这里用for循环遍历数组 ， k得到的是属性名，obj[k]得到的是属性值
for( var k in obj) {
}
第四步：在每一行里面创建有删除二字的单元格：
for(var i=;i<datas.length;i++)
{
var tr=document.createElement("tr");
tbody.appendChild(tr);
for(var k in datas[i])
{
var td=document.createElement("td");
tr.appendChild(td);
td.innerHTML=datas[i][k];
}
var td=document.createElement("td");
tr.appendChild(td);
td.innerHTML="<a href="javascript:;">删除</a>" ;
}
第五步：删除操作，点击“删除”，所点击的那一行就会被删除
var as=document.querySelectorAll("a");
for(var i=; i<as.length;i++)
{
as[i].onclick=function()
{
tbody.removeChild(this.parentNode.ParentNode);
}
}
全部完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:;
margin:;
}
table{
width:500px;
margin:100px auto;
border-collapse:collapse;/*边框合并模式*/
text-align:center;
}
td,th{
border:1px solid #;
}
thead tr{
height:40px;
background-color: #cccccc;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead> <tbody> </tbody>
</table>
</body>
</html>
<script>
//1,先准备数据
var datas=[{
name:"甲",
subject:"javascript",
score:
},{
name:"乙",
subject:"javascirpt",
score:
},{
name:"丙",
subject:"javascript",
score:
}];
//2,往tbody里面创建行，有几个人（通过数组的长度）我们就创建几行
var tbody=document.querySelector("tbody");
for(var i=;i<datas.length;i++) //外面的for循环 是 行tr
{
var tr=document.createElement("tr");
tbody.appendChild(tr);
//3,往tr每一行里面创建单元格（跟数据有关系的3个单元格），td单元格的数量取决于每个对象的属性个数 for循环遍历对象 datas[i]
for(var k in datas[i]) //里面的for循环是 列
{
var td=document.createElement("td"); //创建单元格
tr.appendChild(td);
td.innerHTML=datas[i][k]; //把对象里面的属性值 datas[i][k]给td
}
//4，创建有删除二字的单元格
var td=document.createElement("td");
tr.appendChild(td);
td.innerHTML="<a href='javascript:;'>删除</a>";
} //5,删除操作
var as=document.querySelectorAll("a");
for(var i=;i<as.length;i++)
{
as[i].onclick=function () { //点击a 删除 当前a 所在的行（a链接的爸爸的爸爸）
tbody.removeChild(this.parentNode.parentNode);
}
}
</script>
关键代码：
1，var datas=[{ }, { }, { }] ; 用数组准备数据
2，行数是通过数组的长度创建（datas.length)，包含数据的列数是根据数组中每个对象的属性的个数创建 (datas[i] ) , 都是通过for循环遍历，外面的for循环遍历行，里面的for循环遍历列，从而创建单元格
3，td.innerHTML=datas[i][k]; 把数组中每个对象的每个属性值依次赋给单元格 td
4，最后一列的所有“删除”的单元格单独创建，也是根据行数创建
5，td.innerHTML="<a href='javascript:;'>删除</a>"; href属性等于“javascript:;” ,可以避免页面跳转
6，tbody.removeChild(this.parentNode.parentNode; 删除操作中是tbody需要删除某一个孩子（某一行），表示为当前点击的a链接所在单元格的所在行
js 动态生成表格案例的更多相关文章
- JS动态生成表格后 合并单元格
JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单 ...
- js动态生成表格
动态生成表格 *创建一个页面:两个输入框和一个按钮 *代码和步骤 /* 1.得到输入的行 ...
- 利用JS动态生成隔行换色HTML表格
用JS生成动态生成表格,行.列由用户输入,并使表格隔行换色 方法一. 代码: <!DOCTYPE html> 2 <html> 3 <head> 4 <tit ...
- 爬虫案例(js动态生成数据)
需求:爬取https://www.xuexi.cn/f997e76a890b0e5a053c57b19f468436/018d244441062d8916dd472a4c6a0a0b.html页面中的 ...
- 抓取js动态生成的数据分析案例
需求:爬取https://www.xuexi.cn/f997e76a890b0e5a053c57b19f468436/018d244441062d8916dd472a4c6a0a0b.html页面中的 ...
- 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 ...
随机推荐
- Docker入门-Dockerfile的使用
使用Dockerfile定制镜像 镜像的定制实际上就是定制每一层所添加的配置.文件.我们可以把每一层修改.安装.构建.操作的命令都写入一个脚本,这个脚本就是Dockerfile. Dockerfile ...
- gdb调试时忽略SIGPIPE 等信号
GDB调试网络程序时,会遇到SIGPIPE信息,默认GDB会把程序停下来,即使程序使用signal(SIGPIPE, SIG_IGN);来忽略信号.用handle命令设置一下缺省的signal的处理行 ...
- 十四周学习总结&简易记事本
学习总结: 一.JDBC: 1.JDBC提供里一套与平台无关的标准数据库操作接口和类,只要支持java的数据库厂商,所提供的数据库都可以以使用JDBC操作. 2.JDBC的主要操作类及接口: 3.JD ...
- wls12C启用Gzip
https://community.oracle.com/message/14109820 https://docs.oracle.com/middleware/1221/wls/NOTES/what ...
- layui学习地址
--layui学习地址 ,相当之好用,非常感谢为我们工作和学习提供方便的才子们,谢谢~https://www.layui.com/demo/layim.html
- PowerDesigner 入门使用
<转载于--https://www.cnblogs.com/biehongli/p/6025954.html> PowerDesigner最基础的使用方法入门学习 1:入门级使用Pow ...
- Git 提交 .gitignore文件
问题描述 不知道小伙伴有木有遇到这种情况:想在工程里增加 .gitignore 文件,用于在以后提交后,过滤哪些文件或者目录. 但是,在当前工程的根目录下,执行如下执行命令后,依然不能把 .gitig ...
- 跨域请求配置 Amazon AWS S3 腾讯云 阿里云 COS OSS 文件桶解决方案以及推荐 Lebal：Research
跨域请求配置 跨域请求指的就是不同的域名和端口之间的访问.由于 ajax 的同源策略影响.跨域请求默认是不被允许的. 使用@font-face外挂字体时,可能遇到跨域请求CROS问题:F12控制台报错 ...
- P1596 【[USACO10OCT]湖计数Lake Counting】
可爱的题面君~~ 个人感觉这题还是很简单的,就是一个完全不加工的找联通块个数 个人解题思路是先读入,然后循环一遍,遇到水就dfs,并把这个w所在的联通块“删除”,并在答案上加一 最后输出答案 具体注释 ...
- python_面试题_HTTP基础相关问题
1.相关问题 问题1: 客户端访问url到服务器,整个过程会经历哪些 问题2: 描述HTTPS和HTTP的区别 问题3: HTTP协议的请求报文和响应报文格式 问题4: HTTP的状态码有哪些? 2. ...