学习记录-js基础-学生信息登记表

学生信息登记表功能描述

1. 依次输入学生信息，点击录入按钮会将输入信息填充到下方表格中，并记录数据条数
2. 输入框不能有为空的，否则会出现提示
3. 刷新页面，数据不丢失
4. 点击表格中删除按钮，数据会被删除

实现效果

学生信息登记表

1. 准备阶段

html框架

  <h1>学生就业统计表</h1>
  <form class="info" autocomplete="off">
    <input type="text" class="uname" name="uname" placeholder="姓名" />
    <input type="text" class="age" name="age" placeholder="年龄" />
    <input type="text" class="salary" name="salary" placeholder="薪资" />
    <select name="gender" class="gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    <select name="city" class="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="曹县">曹县</option>
    </select>
    <button class="add">
      <i class="iconfont icon-tianjia"></i>添加
    </button>
  </form>

  <div class="title">共有数据<span>0</span>条</div>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>就业城市</th>
        <th>录入时间</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!--  -->
    </tbody>
  </table>

清除表单默认事件，定义一个数组来存放数据

	const form = document.querySelector('.info')
	const arr = []
	form.addEventListener('submit', function (e) {
	      e.preventDefault()
	    })

2. 数据渲染

封装数据渲染函数，从本地存储中获取数据，用map将获取的数据映射到表格中

1. 如果本地无数据，arr为null，无法被映射
2. 在主线程中获取数据，并调用渲染函数，确保页面刷新后数据不丢失
3. 本地中存储的为字符串，取出需用JSON.parse转为对象

    const span = document.querySelector('.title span')				//记录数据条数位置
    const arr = JSON.parse(localStorage.getItem('data')) || []		//取数据，当本地无数据时，默认为空数组
    const tbody = document.querySelector('tbody')
    addData()		//主线程调用渲染函数
    function addData() {
      const arr = JSON.parse(localStorage.getItem('data')) || []	//渲染前先调用，确保数据为最新的
      const newArr = arr.map(function (ele, index) {
        return `<tr>
        <td>${ele.stuId}</td>
        <td>${ele.uname}</td>
        <td>${ele.age}</td>
        <td>${ele.gender}</td>
        <td>${ele.salary}</td>
        <td>${ele.city}</td>
        <td>${ele.time}</td>
        <td>
          <a href="javascript:">
            <i class="iconfont icon-shanchu"></i>
            删除
          </a>
        </td>
      </tr>`
      })
      tbody.innerHTML = newArr.join('')
      span.innerHTML = arr.length			//数据条数为数组长度
    }

3. 数据添加

创建对象，并将输入框中获取的数据写入对象中，并推入数组，将其渲染到表格中，再将数组存到本地存储中，调用渲染函数

1. 输入学生对应序号不能重复，需确保值为数组最后一个的数字加1
2. 数组更新完需要存储到本地中

	const addBtn = document.querySelector('.add')
	const form = document.querySelector('.info')			//所需元素的位置
    const uname = document.querySelector('.uname')
    const age = document.querySelector('.age')
    const salary = document.querySelector('.salary')
    const gender = document.querySelector('.gender')
    const city = document.querySelector('.city')
    addBtn.addEventListener('click', function () {
      if (!uname.value || !age.value || !salary.value || !gender.value || !city.value) {
        return alert('请填写完整信息')
      }
      const obj = {
        stuId: arr.length === 0 ? 1 : arr[arr.length - 1].stuId + 1,	//三元运算符判断序号
        uname: uname.value,
        age: age.value,
        gender: gender.value,
        salary: salary.value,
        city: city.value,
        time: new Date().toLocaleString()			//简易获取时间的方法
      }
      arr.push(obj)
      localStorage.setItem('data', JSON.stringify(arr))			//将新数组存储到本地中
      addData()	
      form.reset()		//刷新输入框
    })

判断输入框是否为空，如果为空，停止录入，并返回alert警告

	if (!uname.value || !age.value || !salary.value || !gender.value || !city.value) {
        return alert('请填写完整信息')
      }

4. 数据删除

找到删除按钮，绑定事件（使用事件委托），并遍历数组，如果数组中存在某一项的序号等于将要删除信息的序号，那么将数组中的那一项删除，并将数组存储到本地存储中，再调用渲染函数

	tbody.addEventListener('click', function (e) {
      if (e.target.tagName === 'A') {
        for (let i = 0; i < arr.length; i++) {
          if (e.target.parentNode.parentNode.firstElementChild.innerHTML == arr[i].stuId) {
            arr.splice(i, 1)
            localStorage.setItem('data', JSON.stringify(arr))
            addData()
          }
        }
      }
    })

完整实例代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>学生就业统计表</title>
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="css/index.css" />
</head>

<body>
  <h1>学生就业统计表</h1>
  <form class="info" autocomplete="off">
    <input type="text" class="uname" name="uname" placeholder="姓名" />
    <input type="text" class="age" name="age" placeholder="年龄" />
    <input type="text" class="salary" name="salary" placeholder="薪资" />
    <select name="gender" class="gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    <select name="city" class="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="曹县">曹县</option>
    </select>
    <button class="add">
      <i class="iconfont icon-tianjia"></i>添加
    </button>
  </form>

  <div class="title">共有数据<span>0</span>条</div>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>就业城市</th>
        <th>录入时间</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!--  -->
    </tbody>
  </table>
  <script>
    // 参考数据
    let initData = [
      {
        stuId: 1,
        uname: '张三',
        age: 20,
        gender: '男',
        salary: 5000,
        city: '北京',
        time: '2021-01-01 10:00:00'
      }
    ]

    //数据渲染
    const span = document.querySelector('.title span')
    const arr = JSON.parse(localStorage.getItem('data')) || []
    const tbody = document.querySelector('tbody')
    addData()
    function addData() {
      const arr = JSON.parse(localStorage.getItem('data')) || []
      const newArr = arr.map(function (ele, index) {
        return `<tr>
        <td>${ele.stuId}</td>
        <td>${ele.uname}</td>
        <td>${ele.age}</td>
        <td>${ele.gender}</td>
        <td>${ele.salary}</td>
        <td>${ele.city}</td>
        <td>${ele.time}</td>
        <td>
          <a href="javascript:">
            <i class="iconfont icon-shanchu"></i>
            删除
          </a>
        </td>
      </tr>`
      })
      tbody.innerHTML = newArr.join('')
      span.innerHTML = arr.length
    }
    // 数据添加
    const form = document.querySelector('.info')
    const addBtn = document.querySelector('.add')
    const uname = document.querySelector('.uname')
    const age = document.querySelector('.age')
    const salary = document.querySelector('.salary')
    const gender = document.querySelector('.gender')
    const city = document.querySelector('.city')
    addBtn.addEventListener('click', function () {
      if (!uname.value || !age.value || !salary.value || !gender.value || !city.value) {
        return alert('请填写完整信息')
      }
      const obj = {
        stuId: arr.length === 0 ? 1 : arr[arr.length - 1].stuId + 1,
        uname: uname.value,
        age: age.value,
        gender: gender.value,
        salary: salary.value,
        city: city.value,
        time: new Date().toLocaleString()
      }
      arr.push(obj)
      localStorage.setItem('data', JSON.stringify(arr))
      addData()
      form.reset()
    })

    //清除表单默认提交事件
    form.addEventListener('submit', function (e) {
      e.preventDefault()
    })
    // 数据删除

    tbody.addEventListener('click', function (e) {
      if (e.target.tagName === 'A') {
        for (let i = 0; i < arr.length; i++) {
          if (e.target.parentNode.parentNode.firstElementChild.innerHTML == arr[i].stuId) {
            arr.splice(i, 1)
            localStorage.setItem('data', JSON.stringify(arr))
            addData()
          }
        }
      }
    })

  </script>
</body>

</html>