JS新手案例---出版社信息

最新推荐文章于 2021-10-28 23:40:33 发布

popping_Sun

最新推荐文章于 2021-10-28 23:40:33 发布

阅读量163

点赞数 2

分类专栏：新手教学文章标签： js html css javascript html5

本文链接：https://blog.csdn.net/popping_Sun/article/details/109105182

版权

新手教学专栏收录该内容

8 篇文章 1 订阅

订阅专栏

##新手案例
本篇适合刚刚入手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>编&nbsp;&nbsp;&nbsp;号：</span><input type="text" id="numbers"/><br/>
   <span>书&nbsp;&nbsp;&nbsp;名：</span><input type="text" id="book"/><br/>
   <span>作&nbsp;&nbsp;&nbsp;者：</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方法用于数据存储

popping_Sun

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JS新手案例---出版社信息

##新手案例本篇适合刚刚入手js的小萌新哦！主要利用函数、DOM的方法及点击事件，实现数据的添加、删除、查找。萌新跟着例子敲一遍，对于js肯定会有更加清晰的认识，接下来让我们开始！首先我们来看下效果图输入信息点击添加按钮会在下面的表格中渲染，输入书名点击查找与表格相同的背景色会变红色点击删除按钮会删除该条信息点击清除会将数据清空接下来我们来看原始代码<!DOCTYPE html><html> <head> <meta charset="UTF
复制链接

扫一扫