<!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>图书管理</title>
<style>
h1 {
font-size: 20px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
h2 {
text-align: center;
}
table,
th,
td {
border-collapse: collapse;
border-spacing: 0;
}
table {
width: 600px;
margin: 0 auto;
text-align: center;
}
th,
td {
border: 1px solid #bcbcbc;
padding: 5px 10px;
}
th {
background: #42b983;
font-size: 1.2rem;
font-weight: 400;
color: #fff;
cursor: pointer;
}
tr:nth-of-type(even) {
background: #ddd;
}
.add {
width: 400px;
padding: 10px 50px;
margin: 10px auto;
background: #ccc;
border-radius: 5px;
}
p,
input {
height: 30px;
line-height: 30px;
}
input {
width: 300px;
font-size: 20px;
padding-left: 10px;
}
button {
background: #42b983;
border: none;
cursor: pointer;
}
p button {
float: right;
width: 100px;
height: 40px;
line-height: 40px;
font-size: 20px;
border: none;
border-radius: 5px;
}
td button {
border-radius: 3px;
}
</style>
</head>
<body>
<div id="app">
<h2>图书管理系统</h2>
<table>
<thead>
<tr>
<th>序号</th>
<th>书名</th>
<th>作者</th>
<th>价格</th>
<th>标签</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>1</td>
<td>西游记</td>
<td>吴承恩</td>
<td>999</td>
<td>名著</td>
<td>
<button>删除</button>
</td>
</tr> -->
</tbody>
</table>
<div class="add">
<h2>添加新书</h2>
<div class="form-group">
<p>书名:<input name="name" type="text" /></p>
<p>作者:<input name="author" type="text" /></p>
<p>价格:<input name="price" type="text" /></p>
<p>标签:<input name="tag" type="text" /></p>
<p>
<button>添加</button>
</p>
</div>
</div>
</div>
<script>
// 需要渲染的数据数组
let list = [
{
id: 1,
name: "《三国演义》",
author: "罗贯中",
price: "99.99",
tag: "经典",
},
{
id: 2,
name: "《红楼梦》",
author: "曹雪芹",
price: "88",
tag: "推荐",
},
{
id: 3,
name: "《水浒传》",
author: "施耐庵",
price: "77",
tag: "热销",
},
{
id: 4,
name: "《西游记》",
author: "吴承恩",
price: "60",
tag: "经典",
},
];
// 1、找对象——》获取需要操作的元素
let tbody = document.querySelector("tbody");
let addBtn = document.querySelector(".add button");
let dataInputs = document.querySelectorAll(".form-group input");
// 渲染数组到页面中的函数
function renderList() {
// 把数据数组中的每一项拼接成多个tr组合在一起的字符串,最后渲染
// 把拼接之后的字符串,渲染到tbody中去
let str = "";
list.forEach(function (ele, index) {
str += `
<tr>
<td>${index}</td>
<td>${ele.name}</td>
<td>${ele.author}</td>
<td>${ele.price}</td>
<td>${ele.tag}</td>
<td>
<button data-index="${index}">删除</button>
</td>
</tr>
`;
});
tbody.innerHTML = str;
}
renderList();
// 首屏一来先渲染数据----------------------------
// 添加数据功能---------------------------------------------
// 1、给addBtn注册点击事件
// 2、点击之后,把用户填写的数据添加到数组中去
// 3、清空表单
// 4、如果内容有空,则alert弹框,不去添加
const bookname = document.querySelector("input[name=name]");
const author = document.querySelector("input[name=author]");
const price = document.querySelector("input[name=price]");
const tag = document.querySelector("input[name=tag]");
addBtn.addEventListener("click", function () {
// 把表单的数据获取储存好
// 如果数组被清空,则此时id从1开始
// 判断内容是否有空,如果内容有空,则阻止添加,alert提醒
// 如果内容ok,此时添加数据
// 渲染数据
// 清除表单数据
if (!bookname.value || !author.value || !price.value || !tag.value) {
return alert(`输入内容不能为空`);
}
list.push({
id: list.length ? list[list.length - 1].id + 1 : 1,
name: bookname.value,
author: author.value,
price: price.value,
tag: tag.value,
});
renderList();
bookname.value = "";
author.value = "";
price.value = "";
tag.value = "";
});
// 删除数据功能-------------------------------------------------
// 1、利用事件委托,判断如果是btn被点击了,此时通过btn上的id,找到数组中对应的这一项,删除掉,然后重新渲染
tbody.addEventListener("click", function (e) {
if (e.target.tagName === "BUTTON") {
// 确认框 确认是否要真的删除
if (confirm("您确定要删除这条数据吗?")) {
list.splice(e.target.dataset.index, 1);
renderList();
}
}
});
</script>
</body>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
实战2 -答案参考.zip
共26个文件
jpg:22个
html:4个
需积分: 0 0 下载量 39 浏览量
2023-04-12
21:13:10
上传
评论
收藏 194KB ZIP 举报
温馨提示
实战2 -答案参考.zip
资源推荐
资源详情
资源评论
收起资源包目录
实战2 -答案参考.zip (26个子文件)
实战2 -答案参考
01-tab切换.html 4KB
04-点名器
04-点名器
04-点名器-静态页面完成.html 5KB
images
02.jpg 20KB
06.jpg 5KB
10.jpg 5KB
13.jpg 6KB
01.jpg 13KB
14.jpg 5KB
22.jpg 12KB
15.jpg 16KB
16.jpg 6KB
17.jpg 5KB
21.jpg 7KB
08.jpg 7KB
07.jpg 7KB
12.jpg 9KB
05.jpg 7KB
20.jpg 7KB
18.jpg 6KB
11.jpg 6KB
04.jpg 6KB
19.jpg 7KB
09.jpg 5KB
03.jpg 8KB
03-图书管理系统.html 6KB
02-随机字母.html 3KB
共 26 条
- 1
资源评论
小蟹同学
- 粉丝: 0
- 资源: 1
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功