JS - APIs 本地存储学生信息表

最新推荐文章于 2026-08-21 17:54:30 发布

原创最新推荐文章于 2026-08-21 17:54:30 发布 · 211 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

前端

1.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>学生信息表</title>
    <link rel="stylesheet" href="学生信息表.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="年龄" />
      性别:
      <select name="gender" class="gender">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
      <input type="salary" class="salary" name="salary" placeholder="薪资" />
      就业城市:
      <select name="city" class="city">
        <option value="北京">北京</option>
        <option value="河南">河南</option>
        <option value="上海">上海</option>
        <option value="深圳">深圳</option>
        <option value="厦门">厦门</option>
      </select>
      <button class="add">录入</button>
    </form>
    <h1>就业榜</h1>
    <div class="title">共有记录<span>0</span>条</div>
    <table>
      <thead>
        <tr>
          <th>学号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>薪资</th>
          <th>就业城市</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>

    <script>
      // 获取本地数组放入数组
      // 如果有数据存入数据，如果没有数据为空
      const arr = JSON.parse(localStorage.getItem("date")) || [];
      const tbody = document.querySelector("tbody");
      // 1.渲染表单数据
      function render() {
        // 利用map()遍历数组，返回含tr标签的新数组
        const trArr = arr.map(function (ele, index) {
          return `
          <tr>
            <td>${ele.stuId}</td>
            <td>${ele.stuName}</td>
            <td>${ele.stuAge}</td>
            <td>${ele.stuGender}</td>
            <td>${ele.stuSalary}</td>
            <td>${ele.stuCity}</td>
            <td><a href="javascript:" data-id=${index}>删除</a></td>
          </tr>
            `;
        });
        // 将数组转化为字符串,追加给tbody
        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 gender = document.querySelector(".gender");
      const salary = document.querySelector(".salary");
      const city = document.querySelector(".city");
      info.addEventListener("submit", function (e) {
        // 阻止默认行为，提交不跳转
        e.preventDefault();
        // 表单验证，信息未填完整中断录入
        if (!uname.value || !age.value || !salary.value) {
          return alert("输入内容不能为空！");
        }

        arr.push({
          stuId: arr.length ? arr[arr.length - 1].stuId + 1 : 1,
          stuName: uname.value,
          stuAge: age.value,
          stuGender: gender.value,
          stuSalary: salary.value,
          stuCity: city.value,
        });
        //渲染页面、重置表单
        render();
        this.reset();

        // 将对象存放到本地
        localStorage.setItem("date", JSON.stringify(arr));
      });

      // 3.删除操作
      // 事件委托给tbody
      tbody.addEventListener("click", function (e) {
        if (e.target.tagName === "A") {
          // 得到点击的元素的自定义属性
          // console.log(e.target.dataset.id);
          arr.splice(e.target.dataset.id, 1);
          localStorage.setItem("date", JSON.stringify(arr));
        }
        // 重新渲染
        render();
      });
    </script>
  </body>
</html>

2.css

* {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
  color: #721c24;
}
h1 {
  text-align: center;
  color: #333;
  margin: 20px 0;
}
.info {
  width: 900px;
  margin: 50px auto;
  text-align: center;
}
.info input,
.info select {
  width: 80px;
  height: 27px;
  outline: none;
  border-radius: 5px;
  border: 1px solid #b8daff;
  padding-left: 5px;
  box-sizing: border-box;
  margin-right: 15px;
}
.info .age {
  width: 50px;
}
.info button {
  width: 60px;
  height: 27px;
  background-color: #004085;
  outline: none;
  border: 0;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
}
.title {
  position: relative;
  width: 800px;
  height: 35px;
  margin: 5px auto;
  text-align: right;
  line-height: 35px;
  color: #004085;
  background-color: #e4f1ff;
}
.title span {
  color: red;
  margin: 0 3px;
}
table {
  margin: 0 auto;
  width: 800px;
  border-collapse: collapse;
  color: #004085;
}
th,
td {
  padding: 10px;
  border: 1px solid #b8daff;
  text-align: center;
}
th {
  background-color: #cfe5ff;
  font-size: 20px;
  font-weight: 400;
}
td {
  color: #666;
  font-size: 16px;
}
tbody tr:hover {
  background-color: #ece1f8;
}

标签

#javascript