图书管理

分析该项目需要基本功能为增删查改 根据下拉框所选的内容不同，返回查询数组对象，初始化 取到需要的元素

    let add = document.querySelector('.add')
    let search = document.querySelector('.search')
    let getDonor = document.querySelector('.getDonor')
    let getMoney = document.querySelector('.getMoney')
    let getUnit = document.querySelector('.getUnit')
    let getDate = document.querySelector('.getDate')
    let searchOption = document.querySelector('.searchOption')

初始化操作需要定义一个空字符串用来拼接遍历的数据，用innerHTML模板 字符串渲染到tbody里 将打印封装为一个函数，方便每次的页面加载只需要调用该函数，渲染页面

let traversingfor = function (arr = donorlist) {
      tbody.innerHTML = ''
      for (let i = 0; i < donorlist.length; i++) {
        //判断数组是否为空
        if (donorlist.length == 0) {
          break;
        }
        tbody.innerHTML += `<tr class="table-content">
           <td>${i + 1}</td>
           <td>${donorlist[i].person}</td>
           <td>${donorlist[i].unit}</td>
           <td>${donorlist[i].money}</td>
           <td>${donorlist[i].date}</td>
           <td>
             <a href="#" class="del" data-id ="${donorlist[i].id} ">删</a>
             <a href="#" class="update" ">改</a>
           </td>
         </tr>
 `
      }
    }
    traversingfor()

实现增加功能 add按钮点击时触发增加业务， id实现自增，三元运算符判断，当数据源数组长度大于0时，拿数组的最后一个元素的id+1，否则就默认为0    拿到数据，以对象的格式添加到数据源中，在重新初始化界面    点击添加之后将输入框和选择框的值清空

add.addEventListener('click', function () {
      let obj = {
        id: donorlist.length > 0 ? donorlist[donorlist.length - 1].id + 1 : 1001,
        person: getDonor.value.trim(),
        unit: getUnit.value.trim(),
        money: getMoney.value.trim(),
        date: getDate.value.trim()
      }
      donorlist.push(obj)
      traversingfor()
      console.log(donorlist)
    })

实现删除功能 动态添加的元素需要事件委托，需要获取对应数据的id值，以tbody为父元素，判断当前点击的元素是否包含del类利用filter遍历，过滤所有数据中id不等于当前点击对象的id，即拿到非当前对象的，id值的数据，再重新赋值给数据源，并初始化界面

tbody.addEventListener('click', function (e) {
      if (e.target.className == 'del') {
        let idi = e.target.dataset.id
        for (let i = 0; i < donorlist.length; i++) {
          console.log(donorlist[i].id)
          if (idi == donorlist[i].id) {
            donorlist.splice(i,1)
            traversingfor()
          }
        }
      }
    })

实现查询功能

根据选项查询需要获取选项值，用一个临时数组遍历找到满足条件的记录，添加到临时数组中，然后用封装的重新打印到界面当中。search.addEventListener('click', function () {
        let value = searchOption.value
        if (value == '请选择') {
          traversingfor()
        } else {
          let temp = []
          for (let i = 0; i < donorlist.length; i++) {
            if (donorlist[i].unit == value) {
              temp.push(donorlist[i])
            }
          }
          traversingfor(temp)
        }
      })