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>

      <!-- 捐贈人金額日期等內(nèi)容 -->
      <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>
        <!-- 表格內(nèi)容 -->
        <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 ' }
      ]

      // 獲取內(nèi)容元素
      let tbody = document.querySelector('tbody')
      // 獲取新增的控件
      let btn = document.querySelector('.add')
      // 本地儲存數(shù)組
      // 判斷是否取到值,取到值就傳到數(shù)組
      let arr = localStorage.getItem('local')
      if(arr){
        donorlist = JSON.parse(arr)
      }
      // 獲取刪除控件
      let dels = document.querySelectorAll('.del')

      // 獲取數(shù)組內(nèi)的元素
      let getDonor = document.querySelector('.getDonor')
      let getUnit = document.querySelector('.getUnit')
      let getMoney = document.querySelector('.getMoney')
      let getDate = document.querySelector('.getDate')

      // 函數(shù)封裝,模板字符串拼接  展示數(shù)據(jù)效果
      function fn(){
        tbody.innerHTML = ''

        // 循環(huán)遍歷
        for(let i = 0; i < donorlist.length; i++){
          // 新tr
          let newTr = document.createElement('tr')
          // 輸入內(nèi)容
          // 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)
        }
      }
      // 記得調(diào)用函數(shù)
      fn()

      // 新增功能
      // 點擊新增按鈕后,把內(nèi)容push 到數(shù)組
      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>
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容