##新手案例
本篇适合刚刚入手js的小萌新哦!主要利用函数、DOM的方法及点击事件,实现数据的添加、删除、查找。萌新跟着例子敲一遍,对于js肯定会有更加清晰的认识,接下来让我们开始!
首先我们来看下效果图
输入信息点击添加按钮会在下面的表格中渲染,输入书名点击查找与表格相同的背景色会变红色
点击删除按钮会删除该条信息
点击清除会将数据清空
接下来我们来看原始代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格出版社</title>
<style type="text/css">
*{
margin: 0 auto;
}
.box{
position: absolute;
z-index: 5;
width: 80%;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto auto;
height: 500px;
text-align: center;
border: 1px solid #c8e3f6;
}
.box span{
font-weight: bold;
color: #004a87;
}
input{
text-indent: 2em;
outline: none;
border: 1px solid #daaab8;
border-radius: 15px;
width: 150px;
margin-top: 5px;
height: 30px;
color: #825e5e;
background: rgba(104,138,199,0.2);
}
.button{
width: 80px;
color: #d2906e;
text-indent: 0;
background: rgba(255,192,209,0.3);
margin: 5px 25px;
}
.btnone{
width: 80px;
color: #d2906e;
text-indent: 0;
border: 1px solid #daaab8;
background: rgba(255,192,209,0.3);
outline: none;
border-radius: 15px;
}
table{
text-align: center;
color: #d2906e;
width: 350px;
}
table td{
color: #825e5e;
}
</style>
</head>
<body>
<div class="box">
<span>编 号:</span><input type="text" id="numbers"/><br/>
<span>书 名:</span><input type="text" id="book"/><br/>
<span>作 者:</span><input type="text" id="writer"/><br/>
<span>出版社:</span><input type="text" id="press"/><br/>
<input type="button" value="添加" id="add" class="button"/>
<input type="button" value="清除" id="clear" class="button"/><br/>
<span>查找:</span><input type="text" id="searchData" style="width: 200px;"/>
<input type="button" id="search" value="查找" class="button" style="margin: 5px 0px;"/>
<br/>
<table>
<thead>
<tr>
<th>id</th>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
<th>删除</th>
</tr>
</thead>
<tbody>
<!--<tr>
<td>id</td>
<td>书名</td>
<td>作者</td>
<td>出版社</td>
<td>删除</td>
</tr>-->
</tbody>
</table>
</div>
</body>
<script>
//将数据本地存储,当页面加载完成开始调用渲染存储数据,没有的话直接赋值新的数组
window.onload=function(){
if(localStorage.arr03){
arr = JSON.parse(localStorage.arr03);
show(arr);
}else{
arr = [];
}
}
var numbers = document.getElementById("numbers");
var writer = document.getElementById("writer");
var book = document.getElementById("book");
var press = document.getElementById("press");
var add = document.getElementById("add");
var clear = document.getElementById("clear");
//添加数据以便下一步渲染
add.onclick =function(){
//当数据不齐全时进行提醒
if(numbers.value=='' || book.value=='' || writer.value=='' || press.value == ''){
alert("请补全相关信息");
}else{
var obj={
id:+new Date(),
numbers:numbers.value,
writer:writer.value,
book:book.value,
press:press.value
}
arr.push(obj);
show(arr);
localStorage.arr03=JSON.stringify(arr);//将新的数据进行本地存储,后面数据每发生一次变化就要更新一下
}
};
//渲染页面
function show(arr){
var str = '';
var tbody = document.querySelector("tbody");
for(i=0;i<arr.length;i++){
str += `
<tr class="trs">
<td>${arr[i].numbers}</td>
<td>${arr[i].book}</td>
<td>${arr[i].writer}</td>
<td>${arr[i].press}</td>
<td>
<button type='button' class="btnone" οnclick='del(${arr[i].id})'>删除</button>
</td>
</tr>
`
}
tbody.innerHTML = str;
}
//删除函数
function del(id){
for(var i=0;i<arr.length;i++){
if(id==arr[i].id){
arr.splice(i,1);
}
}
show(arr);
localStorage.arr = JSON.stringify(arr);
}
//查找
var searchData = document.getElementById("searchData");
var search = document.getElementById("search");
search.onclick = function(){
var trs = document.querySelectorAll(".trs")
for(var j=0;j<arr.length;j++){
if(searchData.value == arr[j].book){
trs[j].style.background = "red";
searchData.value = '';
}else{
alert("没有查找结果");
}
}
}
//清除所有
clear.onclick = function(){
arr = [];
show(arr);
localStorage.arr03 = JSON.stringify(arr);
}
/*
* @Author: Sun
* @Date: 2020-10-15
*/
</script>
</html>`
该方法核心时用LocalStorage方法用于数据存储