js题目5-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_86997425/article/details/145378220
<!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>
</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="姓名" />
    <select name="gender" class="gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    <input type="text" class="second" name="second" placeholder="二级学院" />
    <input type="text" class="classes" name="classes" placeholder="班级">
    <input type="text" class="major" name="major" placeholder="专业">
    <input type="text" class="teacher" name="teacher" placeholder="辅导员">
    <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>
        <th>录入时间</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <script>
    // 参考数据
    const initData = [
      {
        stuId: 1,
        uname: '张三',
        age: '19', // 将年龄改为字符串类型，与表单输入一致
        second: '计算机',
        gender: '男',
        classes: '1',
        major: '软件',
        teacher: '李武',
        time: '2099/9/9 08:08:08'
      }
    ];
    // 初始化本地存储数据
    if (!localStorage.getItem('data')) {
      localStorage.setItem('data', JSON.stringify(initData));
    }

    // 1. 渲染业务
    // 1.1 先读取本地存储的数据
    const arr = JSON.parse(localStorage.getItem('data')) || [];
    console.log(arr);

    // 1.2 利用map和join方法来渲染页面
    const tbody = document.querySelector('tbody');
    function render() {
      const trArr = arr.map((ele, index) => `
        <tr>
          <td>${ele.stuId}</td>
          <td>${ele.uname}</td>
          <td>${ele.age}</td>
          <td>${ele.gender}</td>
          <td>${ele.second}</td>
          <td>${ele.classes}</td>
          <td>${ele.major}</td>
          <td>${ele.teacher}</td>
          <td>${ele.time}</td>
          <td>
            <a href="javascript:" data-id="${index}">
              <i class="iconfont icon-shanchu"></i>
              删除
            </a>
          </td>
        </tr>
      `);

      tbody.innerHTML = trArr.join('');
      // 显示共计有几条数据
      document.querySelector('.title span').innerHTML = arr.length;
    }
    render();

    // 2. 新增业务
    const info = document.querySelector('.info');
    const uname = document.querySelector('.uname');
    const age = document.querySelector('.age');
    const second = document.querySelector('.second');
    const gender = document.querySelector('.gender');
    const classes = document.querySelector('.classes');
    const major = document.querySelector('.major');
    const teacher = document.querySelector('.teacher');

    // 2.1 form表单注册提交事件，阻止默认行为
    info.addEventListener('submit', function (e) {
      e.preventDefault();
      // 2.2 非空判断
      if (!uname.value || !age.value) {
        return alert('学号和姓名输入内容不能为空');
      }
      // 2.3 给 arr 数组追加对象，里面存储 表单获取过来的数据
      arr.push({
        // 处理 stuId：数组最后一条数据的stuId + 1      
        stuId: arr.length ? arr[arr.length - 1].stuId + 1 : 1,
        uname: uname.value,
        age: age.value,
        second: second.value,
        gender: gender.value,
        classes: classes.value,
        major: major.value,
        teacher: teacher.value,
        time: new Date().toLocaleString()
      });
      // 2.4 渲染页面和重置表单（reset()方法）
      render();
      this.reset(); // 重置表单

      // 2.5 把数组重新存入本地存储里面，记得转换为JSON字符串存储
      localStorage.setItem('data', JSON.stringify(arr));
    });

    // 3. 删除业务
    // 3.1 采用事件委托形式，给 tbody 注册点击事件
    tbody.addEventListener('click', function (e) {
      // 判断是否点击的是删除按钮  A 链接
      if (e.target.tagName === 'A') {
        // 得到当前点击链接的索引号。渲染数据的时候，动态给a链接添加自定义属性例如 data-id="0"
        const index = parseInt(e.target.dataset.id);
        // 确认框 确认是否要真的删除
        if (confirm('您确定要删除这条数据吗？')) {
          // 3.3 根据索引号，利用 splice 删除数组这条数据
          arr.splice(index, 1);
          // 3.4 重新渲染页面 
          render();
          // 3.5 把最新 arr 数组存入本地存储
          localStorage.setItem('data', JSON.stringify(arr));
        }
      }
    });
  </script>
</body>

</html>
屏幕录制 2025-01-27 110640