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>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 200,961评论 5赞 473
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,444评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 148,009评论 0赞 333
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,082评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,101评论 5赞 363
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,271评论 1赞 278
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,738评论 3赞 393
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,395评论 0赞 255
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,539评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,434评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,481评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,160评论 3赞 317
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,749评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,816评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,038评论 1赞 256
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,548评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,140评论 2赞 341

推荐阅读更多精彩内容