Web APIs——综合案例

1、学生就业统计表

2、渲染业务

根据持久化数据渲染页面

步骤：

①：读取localstorage本地数据

• 如果有数据则转换为对象放到变量里面一会使用它渲染页面
• 如果没有则用默认空数组[]
• 为了测试效果，可以先把initData存入本地存储看效果

②：根据数据渲染页面。遍历数组，根据数据生成tr，里面填充数据，最后追加给tboby

（提示）可以利用map()和join()数组方法实现字符串拼接

1. 渲染业务要封装成一个函数render
2. 使用map方法遍历数组，里面更换数据，然后返回有数据的tr数组
3. 通过join方法把map返回的数组转换为字符串
4. 把字符串通过innerHTML赋值给tbody 

3、新增业务

点击新增按钮，页面显示新的数据

步骤：

①：给form注册提交事件，要阻止默认提交事件（阻止默认行为）

②：非空判断

如果年龄、性别、薪资有一个值为空，则return返回’输入不能为空‘中断程序

③：给arr数组追加对象，里面存储表单获取过来的数据

④：渲染页面和重置表单（reset()方法）

⑤：把数组数据存储到本地存储里面，利用JSON.stringify()存储为JSON字符串

 4、删除业务

点击删除按钮，可以删除对应的数据

步骤：

①：采用事件委托形式，给tbody注册点击事件

②：得到当前点击的索引号。渲染数据的时候，动态给a链接添加自定义属性data-id="0"

③：根据索引号，利用splice删除数组这条数据

④：重新渲染页面

⑤：把最新arr数组存入本地存储

5、关于stuId的处理

思路：

①：新增加序号应该是最后一条数据的stuId + 1

• 数组[数组的长度-1].stuId + 1

②：但是要判断，如果没有数据则是直接赋值为1，否则就采用上面的做法

  
  
  
  
  



  
新增学员
  

    姓名：
    年龄：
    性别: 
      男
      女
    
    薪资：
    就业城市：
      北京
      上海
      广州
      深圳
      曹县
    
    录入
  

  
就业榜
  
  

    

      

        
学号
        
姓名
        
年龄
        
性别
        
薪资
        
就业城市
        
时间
        
操作
      
    
    

      
    
  
  

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: content-box;
}


a {
  text-decoration: none;
  color:#721c24;
}
h1 {
  text-align: center;
  color:#333;
  margin: 20px 0;
 
}
table {
  margin:0 auto;
  width: 800px;
  border-collapse: collapse;
  color:#004085;
}
th {
  padding: 10px;
  background: #cfe5ff;
  
  font-size: 20px;
  font-weight: 400;
}
td,th {
  border:1px solid #b8daff;
}
td {
  padding:10px;
  color:#666;
  text-align: center;
  font-size: 16px;
}
tbody tr {
  background: #fff;
}
tbody tr:hover {
  background: #e1ecf8;
}
.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 button {
  width: 60px;
  height: 27px;
  background-color: #004085;
  outline: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  border-radius: 5px;
}
.info .age {
  width: 50px;
}