学生信息表单录入显示

1. 基础样式：

html结构：

 <h1>新增学员</h1>
    <form class="info" autocomplete="off">
      姓名：<input type="text" class="uname" name="uname" /> 年龄：<input type="text" class="age" name="age" />
      性别:
      <select name="gender" class="gender">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
      薪资：<input type="text" class="salary" name="salary" /> 就业城市：<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>
    <table>
      <thead>
        <tr>
          <th>学号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>薪资</th>
          <th>就业城市</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- 
        <tr>
          <td>1001</td>
          <td>欧阳霸天</td>
          <td>19</td>
          <td>男</td>
          <td>15000</td>
          <td>上海</td>
          <td>
            <a href="javascript:">删除</a>
          </td>
        </tr> 
        -->
      </tbody>
    </table>

View Code

css样式：

* {
  margin: 0;
  padding: 0;
}

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;
}

View Code

页面展示：

 

 

 2. 功能说明

a）录入学员的信息在下面的表格显示 

b）获取数据  当数据是空（无效数据）不会录入 ， 出现警示框提示

c）再次刷新数据不会丢失  即把数据保存在localStorage了

d）操作 “删除” 时会把对应学员的信息删除

3. 代码实现

3.1 录入数据模块

需求：页面填入信息 点击录入 取得学员的数据  解决了功能 （b）

需求分析：分析html 由 form 表单 和 table 表格组成 ，（1）给form表单注册提交事件 还要阻止默认提交 ； （2）我们在页面输入第一个学员信息然后点击录入按钮 就可以通过表单字段元素的value值得到 ，然后把value值给对象person 存储 ，person有属性 uname 、age 、gender、salary 、city ；（3）然后把存储了第一个学员信息的对象person 通过 push方法存放在数组 persons 里面；

 

 

 、

 

标签：info,color,margin,学生,width,录入,表单,border
来源： https://www.cnblogs.com/zhulongxu/p/16508019.html