用户信息管理案例![Snipaste_2022-01-21_20-49-17.jpg](https://p3-jueji

<!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>Document</title>
  <link rel="stylesheet" href="css/user.css" />
</head>

<body>
  <h1>新增学员</h1>
  <div class="info">
    姓名：<input type="text" class="uname" /> 年龄：<input type="text" class="age" />
    性别:
    <select name="gender" id="" class="gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    薪资：<input type="text" class="salary" /> 就业城市：<select name="city" id="" class="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="曹县">曹县</option>
    </select>
    <button class="add">录入</button>
  </div>

  <h1>就业榜</h1>
  <table>
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>就业城市</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>这是名称</td>
        <td>这是年龄</td>
        <td>这是性别</td>
        <td>这是工资</td>
        <td>这是所在城市</td>
        <td>
          <a href="javascript:" class="del">删除</a>
        </td>
      </tr>
    </tbody>
  </table>
  <script>
    //  1. 准备好数据后端的数据
    let arr = [
      {
        stuId: 1001,
        uname: '欧阳霸天',
        age: 19,
        gender: '男',
        salary: '20000',
        city: '上海'
      },
      {
        stuId: 1002,
        uname: '令狐霸天',
        age: 29,
        gender: '男',
        salary: '30000',
        city: '北京'
      },
      {
        stuId: 1003,
        uname: '诸葛霸天',
        age: 39,
        gender: '男',
        salary: '2000',
        city: '北京'
      }
    ]

    // 获取元素
    let tbody = document.querySelector('tbody')
    let uname = document.querySelector('.uname')
    let age = document.querySelector('.age')
    let gender = document.querySelector('.gender')
    let salary = document.querySelector('.salary')
    let city = document.querySelector('.city')
    let add = document.querySelector('.add')

    // 设置一个空数组
    // 遍历数据
    function init() {
      let newStr = ''

      arr.forEach(function (v, i) {
        newStr += ` <tr>
                   <td>${i + 1}</td>
                   <td>${v.uname}</td>
                   <td>${v.age}</td>
                   <td>${v.gender}</td>
                   <td>${v.salary}</td>
                   <td>${v.city}</td>
                   <td>
                     <a href="javascript:" class="del" id="${v.stuId} ">删除</a>
                   </td>
                  </tr>
      `
      })
      tbody.innerHTML = newStr
    }
    init()

    // 渲染
    add.addEventListener('click', function () {
      // 数据新增
      // 收集数据，生成对象
      let obj = {
        // 最后一个数据+1
        stuId: arr.length > 0 ? arr[arr.length - 1].stuId + 1 : 1001,
        // 赋值
        uname: uname.value,
        age: age.value,
        gender: gender.value,
        salary: salary.value,
        city: city.value
      }
      // 将数据添加到数组
      arr.push(obj)
      console.log(obj);
      init()
    })
    // 数组删除,用事件委托
    tbody.addEventListener('click', function (e) {
      let del = document.querySelector('del')
      if (e.target.className == 'del') {
        // 设置想要删除的目标元素
        let id = e.target.id
        // 循环遍历
        for (let i = 0; i < arr.length; i++) {
          // 判断删除条件
          if (id == arr[i].stuId) {
            arr.splice(i, 1)
            // 渲染
            init()
          }

        }

      }
    })
  </script>


</body>

</html>