JavaScript实现网页动态生成表格
作者:我是Dreamer啊 发布时间:2024-04-16 09:24:00
标签:js,表格
JavaScript(JS)网页–动态生成表格,供大家参考,具体内容如下
在网页中,动态生成列表的内容,将数组中的object加入到列表中(没学到数据库)。在HTML中创建thead,然后通过JavaScipt动态生成tbody。并且在每行最后申城一个单元格,加入删除操作,点击删除可以删除此行。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态生成表格</title>
<style>
table {
border-collapse: collapse;
margin-top: 200px;
margin-left: 500px;
}
table th{
border: 1px solid black;
width: 80px;
height: 40px;
text-align: center;
background-color: cornsilk;
}
table td{
border: 1px solid black;
width: 80px;
height: 40px;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>张三</td>
<td>JavaScript</td>
<td>100</td>
<td><a href="JavaScript:;" >删除</a></td>
</tr>
<tr>
<td>李四</td>
<td>JavaScript</td>
<td>95</td>
<td><a href="JavaScript:;" >删除</a></td>
</tr>
<tr>
<td>王五</td>
<td>JavaScript</td>
<td>98</td>
<td><a href="JavaScript:;" >删除</a></td>
</tr>
<tr>
<td>赵六</td>
<td>JavaScript</td>
<td>91</td>
<td><a href="JavaScript:;" >删除</a></td>
</tr> -->
</tbody>
</table>
<script>
//加入数据
var datas = [
{
name:'张三',
subject:'JavaScript',
score:'100'
},
{
name:'李四',
subject:'JavaScript',
score:'95'
},
{
name:'王五',
subject:'JavaScript',
score:'98'
},
{
name:'赵六',
subject:'JavaScript',
score:'92'
}
];
//创建行,有几个人就创建几行
var tbody =document.querySelector('tbody')
for(var i = 0 ; i < datas.length ; i++){
//创建行
var tr = document.createElement('tr');
tbody.appendChild(tr);
//创建单元格
for (var k in datas[i] ){
var td = document.createElement("td");
td.innerText = datas[i][k];
tr.appendChild(td);
}
//创建删除单元格
var td = document.createElement('td');
td.innerHTML = '<a href="JavaScript:;" >删除</a>';
tr.appendChild(td);
}
var as = document.querySelectorAll('a');
for (var i = 0 ; i <as.length ; i++){
as[i].onclick = function(){
//点击a 删除当前行
tbody.removeChild(this.parentNode.parentNode);
}
}
// for (var k in Obj){
// k 得到的是属性名
// dbj[k] 得到的是属性值
// }
</script>
</body>
</html>
来源:https://blog.csdn.net/weixin_42579348/article/details/109992409
0
投稿
猜你喜欢
- 如何在VS2013下对MySQL5.6进行连接,本文为大家提供了解决方案,供大家参考,具体内容如下环境:win832系统,VS2013,My
- 1.元字符: . 它匹配除了换行字符外的任何字符,在 alternate 模式(re.DOTALL)下它甚至可以匹配换行 ^ 匹配行首。除非
- 0. 前言这几天在写软件工程课设,题目是:设计一款疫苗管理系统,于是用PyQT5写GUI,MySQL做数据库写了一个demo出来。做完之后,
- 最近整理了一下网上关于MySql 链接url 参数的设置,有不正确的地方希望大家多多指教: mysql JDBC URL格式如下: jdbc
- 目标:文件的概念文件的基本操作文件/文件夹的常用操作文本文件的编码方式1.文件的概念1.1文件的概念和作用计算机的文件,就是存储在某种长期存
- 内存溢出问题是参加kaggle比赛或者做大数据量实验的第一个拦路虎。以前做的练手小项目导致新手产生一个惯性思维——读取训练集图片的时候把所有
- 先学会文件的读写!比如像以前在学校读书的时候,第一门编程课设计要求是制作学生管理系统。这就需要使用文件来处理(也可以用数据库,但是一般C语言
- PHP5.4后新增traits实现代码复用机制,Trait和类相似,但不能被实例化,无需继承,只需要在类中使用关键词use引入即可,可引入多
- 1、pd.cut函数有7个参数,主要用于对数据从最大值到最小值进行等距划分 pandas.cut(x, bins,&nb
- SELECTSELECT 语句用于从表中选取数据,是 SQL 最基本的操作之一。通过 SELECT 查询的结果被存储在一个结果表中(称为结果
- 实例如下:</pre><pre name="code" class="python"
- event-----------------------------------------------------------------
- 1。mysql数据库没有增量备份的机制,当数据量太大的时候备份是一个很大的问题。还好mysql数据库提供了一种主从备份的机制,其实就是把主数
- Talk Is Cheap和Java一样,python也提供了对于checked exception和unchecked exception
- 一、前言因为最近刚好被问到这个问题,但是自己当时特别懵逼,导致没有做出来。所以下来后自己Google了很多IoU的博客,但是很多博客要么过于
- #!/usr/bin/python#coding:utf-8#write:JACK#info:ftp exampleimport ftpli
- MVC和MTV框架MVCWeb服务器开发领域里著名的MVC模式,所谓MVC就是把Web应用分为模型(M),控制器(C)和视图(V)三层,他们
- Python 文件操作的详解及实例一、文件操作1、对文件操作流程打开文件,得到文件句柄并赋值给一个变量通过句柄对文件进行操作关闭文件现有文件
- 对于时间的选择问题,查到的大部分为两种情况:1.存在readonly属性的2.没有readonly属性的可直接赋值send_keys()测试
- 问:握怎样测试 MySQL安装?答:可以通过以下命令测试MySQL服务器是否工作:C:\> C:\Program Files\MySQ