普通的表单清空‘删除’添加存储功能

最新推荐文章于 2024-09-11 20:12:18 发布

龙影城

最新推荐文章于 2024-09-11 20:12:18 发布

阅读量118

点赞数

文章标签： css jquery javascript

本文链接：https://blog.csdn.net/weixin_53577099/article/details/115339950

版权

普通的表单清空‘删除’添加存储功能

需求：

1.按清除会将本地清除本地存储，同清除页面中的数据

2.按添加会将数据存入本地存储，同时在页面中显示

3.按DELETE会删除对应的页面表单中的数据，同时清除本地存储数据

localStorag 永久存储

JSON.parse解析字符串

JSON.stringify JavaScript对象转换为字符串

难点：注意字符串与数组的转换，同时存储的必须是字符串，表单结构

<html>



<head lang="en">


  <meta charset="UTF-8">


 <title></title>

  <style>


  /* 清除默认边距 */

  \* {

   padding: 0;

   margin: 0;

  }



  /*大盒子 */

  .wrap {

   width: 410px;

   margin: 100px auto 0;

  }



  /* 表单 */

  table {

   /* 如果可能，边框会合并 */

   border-collapse: collapse;

   /* 默认边框分开 */

   border-spacing: 0;

   /* 边框 */

   border: 1px solid #c0c0c0;

  }



  /* 表格 */

  th,

  td {

   border: 1px solid #d0d0d0;

   color: #404060;

   padding: 10px;

  }



  th {

   background-color: #09c;

   /* 字体设置 */

   font: bold 16px;

   color: #fff;

  }



  td {

   font: 14px;

  }



  td a.get {

   /* 去除下行线 */

   text-decoration: none;

  }



  /* 鼠标移入 */

  a.del:hover {

   text-decoration: underline;

  }



  tbody tr {

   background-color: #f0f0f0;

  }



  tbody tr:hover {

   /* 鼠标样式 */

   cursor: pointer;

   background-color: #fafafa;

  }



  /* 清空样式 */

  .btnAdd {

   width: 110px;

   height: 30px;

   font-size: 20px;

   /* 文本粗细 */

   font-weight: bold;

  }


 </style>

</head>



<body>

  <div class="wrap">


  <input type="text" placeholder="课程名称" id='name'>

  <input type="text" placeholder="所属学院" id='college'><br>

  <input type="button" value="清空内容" id="btn">

  <input type="button" value="添加" id="btnAdd">

    <table>

   <thead>

    <tr>
    
     <th>课程名称</th>
    
     <th>所属学院</th>
    
     <th>操作</th>
    
    </tr>

   </thead>

   <tbody id="j_tb">
		<tr>
          <td>JavaScript1</td>
          <td>前端</td>
          <td><a href="javascript:;" class="get">DELETE</a></td>
        </tr>

   </tbody>

  </table>

 </div>

  <script src="./js/jquery-1.12.4.js"></script>

  <script>


  // 需求：

  // 1.按清除会将本地清除本地存储，同清除页面中的数据

  // 2.按添加会将数据存入本地存储，同时在页面中显示

  // 3.按DELETE会删除对应的页面表单中的数据，同时清除本地存储数据

  // localStorag 永久存储

  // JSON.parse解析字符串

  // JSON.stringify JavaScript对象转换为字符串

  // 难点：注意字符串与数组的转换，同时存储的必须是字符串，表单结构



  $(function () {

   // console.log(location);

   // 表框单元

   const $tbody = $("#j_tb");

   // 获取本地存储

   let data = JSON.parse(localStorage.getItem('get') || '[]')

   // console.log(data);

   // 遍历生成 动态结构

   let bs = ''

   $.each(data, function (index, value) {

    const $newTr = $(`<tr>
    
        <td>${value.name}</td>
    
        <td>${value.college}</td>
    
        <td><a href="javascript:;" class="get">DELETE</a></td>
    
      </tr>`);
    
    // 添加到页面
    
    $tbody.append($newTr);

   })

   // 功能：

   // 1. 清空内容 ==> tbody里面的内容清空掉 ==> empty()

   $("#btn").on("click", function () {

    // 1.1清空内容，但是要保留tbody结构，所以不使用remove
    
    $tbody.empty();
    
    // $tbody.remove(); // 自杀式效果
    
    // 删除元素，并向数组添加新元素
    
    // 1.2 splice删除元素，并向数组添加新元素
    
    // 删除所有数据，给个[]预防null之后无法添加数据
    
    data.splice([])
    
    // 1.3重新存入本地服务器
    
    localStorage.setItem('get', JSON.stringify(data))

   })



   // 2. 添加新的一行放到tbody

   $("#btnAdd").on("click", function () {

    // 2.1将新的数据添加进表单中，同时赋值给一个变量里，方便调用
    
    let name1 = $('#name').val()
    
    let college1 = $('#college').val()
    
    // 2.2创建新的一行表格
    
    const $newTr = $(`<tr>
    
        <td>${name1}</td>
    
        <td>${college1}</td>
    
        <td><a href="javascript:;" class="get">DELETE</a></td>
    
      </tr>`);
    
    // 2.3追加进表格里
    
    $tbody.append($newTr);
    
    // 2.4获取数据
    
    let newObj = {
    
     name: name1,
    
     college: college1,
    
    }
    
    // console.log(newObj);
    
    // 2.5获取本地存储对象
    
    let dataStr = localStorage.getItem('get') || '[]'
    
    // 2.6将字符串转换为数组 //JSON.parse解析字符串
    
    let dataArr = JSON.parse(dataStr)
    
    // console.log(dataArr);
    
    //2.7对象添加到数组-
    
    dataArr.push(newObj)
    
    //2.8数组重新转换为字符串存入本地服务器
    
    localStorage.setItem('get', JSON.stringify(dataArr))

   })





   // 3. 点击delete，删除一整行（对应的tr）

   $tbody.on("click", ".get", function () {

    // parent() 当前元素的父元素
    
    // parents() 当前元素的所有的祖先元素
    
    // $(this).parent().parent().remove();
    
    // 3.1删除当前元素的父元素tr
    
    $(this).parents("tr").remove();
    
    // 3.2获取索引位置
    
    let index = $(this).parents('.get').index()
    
    // console.log(index);
    
    // 3.3  splice(起始索引位置，数量)
    
    data.splice(index - 1, 1)
    
    // 3.4 存入本地存储
    
    localStorage.setItem('get', JSON.stringify(data))

   })

  });

 </script>

</body>



</html>