学习记录-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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值