web API-day08-每日案例微醺代码段

<!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>Donation-management</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>

  <body>
    <div class="donation-management">
      <h3 class="title">捐赠管理</h3>
      <!-- 进阶需求一： 支持搜索 -->
      <!-- 受捐单位； -->
      <div class="recipient">
        <div class="content">
          <span>受捐单位：</span>
          <select>
            <option>壹基金</option>
            <option>嫣然基金</option>
            <option>自然之友</option>
          </select>
          <button class="search">查询</button>
        </div>
      </div>

      <!-- 捐赠人金额日期等内容 -->
      <div class="donor">
        <div class="content">
          <!-- 第一部分 捐赠人 -->
          <div class="person">
            <span>捐赠人：</span>
            <input type="text" class="getDonor" />
          </div>
          <!-- 第二部分 受捐单位 -->
          <div class="unit">
            <span>受捐单位：</span>
            <select class="getUnit">
              <option>壹基金</option>
              <option>嫣然基金</option>
              <option>自然之友</option>
            </select>
          </div>
          <!-- 第三部分 金额 -->
          <div class="money">
            <span>金额：</span>
            <input type="text" class="getMoney" />
          </div>
          <!-- 第四部分 受捐日期 -->
          <div class="date">
            <span>受捐日期：</span>
            <input
              type="datetime-local"
              class="getDate test1"
              id="test1"
              placeholder="请选择日期"
            />
          </div>
          <!-- 新增按钮 -->
          <button class="add">新增</button>
        </div>
      </div>

      <!-- 表格部分 -->
      <table class="table table-bordered donation-list text-center">
        <!-- 表格头 标题 -->
        <thead>
          <tr class="bg-primary">
            <th>序号</th>
            <th>捐赠人</th>
            <th>受捐单位</th>
            <th>金额</th>
            <th>受捐日期</th>
            <th>操作</th>
          </tr>
        </thead>
        <!-- 表格内容 -->
        <tbody>
          <tr class="table-content">
            <td>1</td>
            <td>这是姓名</td>
            <td>这是单位</td>
            <td>这是多少钱</td>
            <td>这是捐赠日期</td>
            <td>
              <a href="#" class="del">删</a>
              <!-- 进阶需求二： 支持修改 -->
              <!-- <a href="#" class="update">改</a> -->
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- js引入文件 -->
    <script src="./libs/jquery/jquery.min.js"></script>
    <script src="./libs/bootstrap/js/bootstrap.min.js"></script>

    <script>
      let donorlist = [
        { id: 1, getDonor: 'sun', getUnit: '壹基金', getMoney: 1000, getDate: '2021-11-23 ' },
        { id: 2, getDonor: 'li', getUnit: '自然之友', getMoney: 1000, getDate: '2021-01-15 ' },
        { id: 3, getDonor: 'wang', getUnit: '嫣然基金', getMoney: 1000, getDate: '2021-06-7 ' }
      ]

      // 获取内容元素
      let tbody = document.querySelector('tbody')
      // 获取新增的控件
      let btn = document.querySelector('.add')
      // 本地储存数组
      // 判断是否取到值,取到值就传到数组
      let arr = localStorage.getItem('local')
      if(arr){
        donorlist = JSON.parse(arr)
      }
      // 获取删除控件
      let dels = document.querySelectorAll('.del')

      // 获取数组内的元素
      let getDonor = document.querySelector('.getDonor')
      let getUnit = document.querySelector('.getUnit')
      let getMoney = document.querySelector('.getMoney')
      let getDate = document.querySelector('.getDate')

      // 函数封装,模板字符串拼接  展示数据效果
      function fn(){
        tbody.innerHTML = ''

        // 循环遍历
        for(let i = 0; i < donorlist.length; i++){
          // 新tr
          let newTr = document.createElement('tr')
          // 输入内容
          // data增加自定义属性,求下标进行删除功能
          newTr.innerHTML += `
            <td>${i + 1}</td>
            <td>${donorlist[i].getDonor}</td>
            <td>${donorlist[i].getUnit}</td>
            <td>${donorlist[i].getMoney}</td>
            <td>${donorlist[i].getDate}</td>
            <td>
              <a href="#" class="del" data-index = '${i}'>删</a>
              <a href="#" class="update">改</a>
            </td>
          `
          // 添加到tbody
          tbody.appendChild(newTr)
        }
      }
      // 记得调用函数
      fn()

      // 新增功能
      // 点击新增按钮后,把内容push 到数组
      btn.addEventListener('click', function(){
        donorlist.push({
          id: donorlist.length + 1,
          getDonor: getDonor.value,
          getUnit: getUnit.value,
          getMoney: getMoney.value,
          getDate: getDate.value,
        })
        // 重新渲染
        fn()
        // 获取的元素为字符串,要通过JSON转化
        // 本地储存到 local ,转化到 donorlist 中
        localStorage.setItem('local', JSON.stringify(donorlist))
      })

      // 删除功能
      // 点击删除功能,删除点击的那一组
      // 此事件要用上 事件委托
      tbody.addEventListener('click', function(e){
        // 打印按键
        console.log(e.target.tagName);
        // 打印下标记
        console.log(e.target.dataset['index']);
        if(e.target.tagName === 'A') {
          // 删除的位置用下标位置
          donorlist.splice(e.target.dataset['index'], 1)
          // 重新渲染
          fn()
          // 重新存储
          localStorage.setItem('local',JSON.stringify(donorlist))
        }
      })

      
    </script>
  </body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容