java前端javascript生成动态表格示例演示
作者:馆主阿牛 发布时间:2023-08-24 11:13:45
标签:java,前端,javascript,动态表格
前言
动态生成表格是前端开发中非常重要的内容,常常是后端返回数据(大多是json类型),我们前端通过js循环来动态添加,所以这部分内容是十分重要的,今天我就来写写这部分内容,其实也很简单的,仔细看哦!!!
案例分析
因为里面的学生数据都是动态的,我们需要 js 动态生成。这里我们模拟数据,自己定义好数据。数据我们采取对象形式存储。所有的数据都是放到 tbody 里面的行里面。因为行很多,我们需要循环创建多个行(对应多少人)。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
width: 400px;
border-collapse: collapse;
margin: 100px auto;
border: 1px solid #888;
text-align: center;
}
th,td{
border: 1px solid #888;
padding: 5px 0px;
}
th{
background-color: skyblue;
}
tr:hover{
cursor: default;
background-color: pink;
}
a:hover{
cursor: pointer;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
//动态生成表格
//data是模拟的后台传来的数据
var data = [
{
"name" :"我是阿牛",
"class":"javascript",
"grade": 100
},
{
"name" :"别搞我啊",
"class":"javascript",
"grade": 99
},
{
"name" :"我不懂细节",
"class":"javascript",
"grade": 98
},
{
"name" :"她说不合适",
"class":"javascript",
"grade": 96
},
{
"name" :"神明也无光",
"class":"javascript",
"grade": 95
}
];
var tbody = document.querySelector('tbody');
for(var i=0;i<data.length;i++){
var tr = document.createElement('tr'); //创建行
tbody.appendChild(tr); // 将tr放到tbody里
for (var k in data[i]){
var td = document.createElement('td'); //创建列
td.innerHTML = data[i][k]; //单元格(列)添加数据
tr.appendChild(td); //将td放到tr里
}
//创建删除的单元格
var td = document.createElement('td');
td.innerHTML = '<a herf="javascript:;" style="color:blue;">' + '删除' + '</a>';
tr.appendChild(td);
}
//实现点击删除两字删除对应的行
var as = document.querySelectorAll('a');
for (var i=0;i<as.length;i++){
as[i].onclick = function(){
tbody.removeChild(this.parentNode.parentNode); //this.parentNode.parentNode 代表a的父亲的父亲
}
}
</script>
</body>
</html>
动图演示
来源:https://blog.csdn.net/qq_57421630/article/details/123452186
0
投稿
猜你喜欢
- 关于asp缓存函数,类什么的,在网上可以说笔笔皆是,为啥我要不辞辛苦去写一个呢?大概看了下,各有各的优点吧,可是大部分好像不可以缓存数据额,
- 一共4个页面:form.asp; chk.asp; num.asp; count.asp得到一个随即数字。加密
- 两行JavaScript代码的QQ窗口抖动效果<img id="win" style='pos
- 以下为测试例子。 1.首先创建两张临时表并录入测试数据: 代码如下:create table #temptest1 ( id i
- 微服务架构中收集通常大家都采用ELK进行日志收集,同时我们还采用了SkyWalking进行链路跟踪,而SkyWalking数据存储也用到了E
- 修复Access数据库,我们一般使用微软Office 97中带的Access 97对数据库进行修复和整理。Access数据库被损坏分以下几种
- 因为有个老Yashica相机机身,前一阵忍不住想配几个标准镜头。到国内购物网站以及摄影器材交流论坛上看了看,发现不仅很少,价格不实在,而且品
- 前言在应用程序开发的过程中,有的时候需要在代码中保存一些机密的信息,比如加密密钥,字符串,或者是用户名密码等。通常的做法是保存到一个配置文件
- 比如有一个需求,通过sql语句,返回-5至5的随机整数.如果这一个放在PHP中,则非常简单直接用print rand(-5,5);?>
- 用户登录验证脚本,Chkpwd.asp<% '=======用户登录验证脚本======= '如果尚未定义Passed
- Google以其简洁的搜索框引领着互联网,搜索系统似乎成了每个网站必备品,甚至于是那些本身几乎是由静态页面组成的企业网站都要来个搜索功能,这
- 如何只取数据库的前3条记录?怎么控制只取得前3行数据 这要看是什么类型的数据库了,对于Access和SQ
- 我在Web服务器端安装了Web Server IIS4.0、Oracle Net8 for Client,并创建好了和Oracle8数据库的
- 这个效果前些日子有人在论坛问起,今天有空研究了下。我打了原创标记,因为我在写这个方法时的确没有参考过别人的代码。我的方法其实就是层遮罩加AL
- 今天是五一劳动节,可是我们劳动人民的节日哦。很多大网站都设计了特殊的logo来表示向每一位普通的劳动者致敬!下面就让我们看看这些logo吧!
- 常有人因为页面的面积问题,想在一个窄小的地方,显示一条条的信息,顺序往上滚动,在经典的BBS里,有一个随机上滚动的JS,好些人用不了,现在蛋
- 代码如下: <% dim fso,objFolder,objFiles dim filelist Set fso=Server.Cre
- df.dropna()函数用于删除dataframe数据中的缺失数据,即 删除NaN数据.官方函数说明:DataFrame.dropna(a
- 主要要文件有:Index.html 实现功能,一个文本框,输入内容并实现提示 search.asp 查询功能,让文本框输入的内容在
- 请先看看以下演示中的图案文字。这可不是图片效果,而是用CSS滤镜中的Chroma() 语句做成的文本文