Web Api 小项目 页面操作需要通过数据

众人皆醉我独醒
128 阅读1分钟 
<!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" />
  <style>
  </style>
</head>

<body>
  <div class="donation-management">
    <h3 class="title">捐赠管理</h3>
    <!-- 受捐单位 -->
    <div class="recipient">
      <div class="content">
        <span>受捐单位：</span>
        <select class="searchOption">
          <option>请选择</option>
          <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" data-name="这是姓名" data-dep="这是单位">改</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>


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

</html>

数据模拟，数据渲染 数据统计 数据的新增删除，

window.addEventListener('load', function () {

    // 获取元素
    let tbody = this.document.querySelector('tbody')
    let add = this.document.querySelector('.add')
    let getDonor = this.document.querySelector('.getDonor')
    let getUnit = this.document.querySelector('.getUnit')
    let getMoney = this.document.querySelector('.getMoney')
    let getDate = this.document.querySelector('.getDate')
    let search = this.document.querySelector('.search')
    let searchOption = this.document.querySelector('.searchOption')





    // 模拟数据
    let donor = JSON.parse(this.localStorage.getItem('shu_12'))

    //   渲染数据

    function init(arr = donor) {

        let htmlStr = ''

        //遍历数据
        arr.forEach(function (item, index) {

            htmlStr += `<tr class="table-content">
                        <td>1</td>
                        <td>${item.person}</td>
                        <td>${item.unit}</td>
                        <td>${item.money}</td>
                        <td>${setTime(item.date)}</td>
                        <td>
                        <a href="#" class="del" data-id=${item.id}>删</a>
                        <a href="#" class="update" data-name="这是姓名" data-dep="这是单位">改</a>
                        </td>
                    </tr>`
        })
        tbody.innerHTML = htmlStr
    }
    init()
    save()


    // 增加
    add.addEventListener('click', function () {

        let obj = {
            id: donor.length > 0 ? donor[donor.length - 1].id + 1 : 1,
            person: getDonor.value,
            unit: getUnit.value,
            money: getMoney.value,
            date: getDate.value
        }
        // 追加到数组
        donor.push(obj)
        // 重新渲染
        init()
        save()
    })

    // 删除
    tbody.addEventListener('click', function (e) {

        // 绑定删除键‘del’
        if (e.target.className == 'del') {

            // 必须通过ID来删除，没有ID就先存储ID，再获取删除
            // 获取设置的ID
            let id = e.target.dataset.id
            // 遍历数组删除相对应的ID数据
            donor.forEach(function (v, i) {
                // 判断数组中的ID和点击的ID是否相同，相同就删除
                if (v.id == id) {
                    donor.splice(i, 1)
                    init()
                    save()
                }
            })
        }

    })

    //时间格式化
    function setTime(v) {
        let date = new Date(v)
        // 日期api
        // getFullYear():获取年
        let year = date.getFullYear()
        // getMonth():获取月，0 - 11
        let month = date.getMonth() + 1
        // getDate():获取日
        let day = date.getDate()

        return `${year}-${month}-${day}`
    }

    // 查询
    search.addEventListener('click', function () {
        // 声明用户选择的信息
        let value = searchOption.value

        if (value == '请选择') {
            init()
        } else {
            // 创建临时数组，将用户选择的数据存放到临时数组进行渲染
            let temp = []
            // 遍历源数据相对应的属性，如果相同就存放到临时数组
            donor.forEach(function (v, i) {
                // 判断是否相同
                if (v.unit == value) {
                    temp.push(v)
                }
            })
            // 重新渲染
            init(temp)
            save()
        }


    })

    // 本地储存
    function save() {
        localStorage.setItem('shu_12', JSON.stringify(donor))
    }
})
avatar
文章
阅读
粉丝