webapi，用户信息管理，js

A
129 阅读1分钟

用户信息管理，

实现要求：1. 用户可以自己添加数据，点击录入然后生成在下面的列表中。2. 点击删除可以删除对应的数据

<!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 stuId = document.querySelector('.stuId')
    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')
    let del = document.querySelector('.del')

    //定义一个数组用来存放用户输入的数据（获得数据）
    let arr = JSON.parse(localStorage.getItem('userManger')) || []
    //数据渲染:必须有 数据+静态结构 实现方式：遍历数据，拼接结构，替换数据，填充到指定的dom中
    function init() {
      let htmlStr = ''
      //遍历arr
      arr.forEach(function (ele, index) {
        htmlStr += ` <tr>
                       <td>${index + 1}</td>
                       <td>${ele.uname}</td>
                       <td>${ele.age}</td>
                       <td>${ele.gender}</td>
                       <td>${ele.salary}</td>
                       <td>${ele.city}</td>
                       <td>
                         <a href="javascript:" class="del" id="${ele.stuId}">删除</a>
                       </td>
                     </tr>`
      })
      tbody.innerHTML = htmlStr
    }
    init()

    //实现数据的新增 准备好需要新增的数据，添加到数据源
    add.addEventListener('click', function () {
      //收集数据，生成一个对象
      let obj = {
        //获取最后一个对象的stuId+1，如果没有数据，id赋值为1001
        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)
      //渲染
      init()
      //存储添加后的数据
      localStorage.setItem('userManger', JSON.stringify(arr))
    })

    //数据删除，用到事件委托，给父级元素添加事件，让子元素来触发
    tbody.addEventListener('click', function (e) {
      //e.target：当前用户单机的元素
      if (e.target.className == 'del') {
        //获得当前要删除的数据的id
        let id = e.target.id
        //根据id找到对应的索引
        for (let i = 0; i < arr.length; i++) {
          if (id == arr[i].stuId) {
            //删除数据
            arr.splice(i, 1)
            //渲染
            init()
            //存储删除后的数据
            localStorage.setItem('userManger', JSON.stringify(arr))
          }
        }
      }
    })
  </script>
</body>
</html>
avatar
文章
阅读
粉丝