js毕业学生就业统计表小案例

本文是在学习javaScript中Web APIs板块中localStorage，事件绑定，事件委托等内容为更加熟练掌握理解相关知识的练习小案例

涉及的一些知识分析

  • render页面利用数组中map+join的方法
  • render完页面后需要reset表单恢复默认值
  • 将数据存入localStorage确保数据不丢失
  • 存储复杂数据类型需要JSON.Stringify()方法将其转化成JSON字符串存储到本地*

网页效果如下

完整代码实现以及包含的css代码如下，可按需取用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!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>
      <!-- <tr>
        <td>1</td>
        <td>迪丽热巴</td>
        <td>23</td>
        <td>女</td>
        <td>12000</td>
        <td>北京</td>
        <td>2099/9/9 08:08:08</td>
        <td>
          <a href="javascript:">
            <i class="iconfont icon-shanchu"></i>
            删除
          </a>
        </td>
      </tr> -->
    </tbody>
  </table>
  <script>
    // 参考数据
    const initData = [
      {
        stuId: 1,
        uname: '迪丽热巴',
        age: 22,
        salary: '12000',
        gender: '女',
        city: '北京',
        time: '2099/9/9 08:08:08'
      }
    ]
    // localStorage.setItem('data', JSON.stringify(initData))
    // 1. 渲染业务
    // 1.1 先读取本地存储的数据
    // (1). 本地存储有数据则记得转换为对象然后存储到变量里面，后期用于渲染页面
    // (2). 如果没有数据，则用 空数组来代替
    const arr = JSON.parse(localStorage.getItem('data')) || []
    console.log(arr)
    // 1.2 利用map和join方法来渲染页面
    const tbody = document.querySelector('tbody')
    function render() {
      // (1). 利用map遍历数组，返回对应tr的数组
      const trArr = 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:" data-id="${index}">
                <i class="iconfont icon-shanchu"></i>
                删除
              </a>
            </td>
          </tr>
        `
      })

      console.log(trArr)
      // (2). 把数组转换为字符串 join
      // (3). 把生成的字符串追加给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 salary = document.querySelector('.salary')
    const gender = document.querySelector('.gender')
    const city = document.querySelector('.city')

    // 2.1 form表单注册提交事件，阻止默认行为
    info.addEventListener('submit', function (e) {
      e.preventDefault()
      // 2.2 非空判断
      if (!uname.value || !age.value || !salary.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,
        salary: salary.value,
        gender: gender.value,
        city: city.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') {
        // alert(11)
        // 3.2 得到当前点击链接的索引号。渲染数据的时候，动态给a链接添加自定义属性例如 data-id="0"
        console.log(e.target.dataset.id)

        // 确认框 确认是否要真的删除
        if (confirm('您确定要删除这条数据吗？')) {
          // 3.3 根据索引号，利用 splice 删除数组这条数据
          arr.splice(e.target.dataset.id, 1)
          // 3.4 重新渲染页面 
          render()
          // 3.5 把最新 arr 数组存入本地存储
          localStorage.setItem('data', JSON.stringify(arr))
        }
      }
    })

  </script>
</body>

</html>

index.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #721c24;
}

h1 {
  text-align: center;
  color: #333;
  margin: 20px 0;

}

.title {
  width: 933px;
  height: 50px;
  line-height: 50px;
  padding-right: 15px;
  border: 1px solid #ebebeb;
  margin: 10px auto;
  background-color: #f2f2f2;
  text-align: right;
}

.title span {
  display: inline-block;
  vertical-align: middle;
  height: 20px;
  margin: -3px 5px 0;
  text-align: center;
  line-height: 20px;
  color: #f26934;
  font-weight: 700;
}

table {
  margin: 0 auto;
  width: 950px;
  border-collapse: collapse;
  color: #3c3637;
}

th {
  padding: 10px;
  background: #f2f2f2;
  font-size: 18px;
  text-align: left;
}

td,
th {
  border: 1px solid #ebebeb;
  padding: 15px;
}

td {

  color: #666;
  font-size: 16px;

}

tbody tr {
  background: #fff;
}

tbody tr:hover {
  background: #fbfafa;
}

tbody a {
  display: inline-block;
  width: 80px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
  background-color: #f26934;
}

.info {
  width: 900px;
  margin: 50px auto;
  text-align: center;
}

.info input,
.info select {
  width: 100px;
  height: 30px;
  outline: none;
  border: 1px solid #ebebeb;
  padding-left: 5px;
  box-sizing: border-box;
  margin-right: 10px;
}

.info button {
  width: 70px;
  height: 30px;
  background-color: #5dbfd8;
  outline: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
}

.info button:hover {
  background-color: #52abc1;
}