数据的增删查改

通过修改后台数据，来实现增删查改

获取标签

arr2 = arr1.indexOf('?')获取问号出现的索引值，截取后面的元素

let arr = [{
        stuId: 1001,
        uname: '空白',
        age: 19,
        gender: '男',
        salary: '20000',
        city: '上海'
      },
      {
        stuId: 1002,
        uname: '不加班',
        age: 29,
        gender: '男',
        salary: '30000',
        city: '北京'
      },
    ]
 let tbody = document.querySelector('tbody')
    let add = document.querySelector('.add')
    let unameEle = document.querySelector('.uname')
    let ageEle = document.querySelector('.age')
    let genderEle = document.querySelector('.gender')
    let salaryEle = document.querySelector('.salary')
    let cityEle = document.querySelector('.city')
    let del = document.querySelector('.del')

渲染到页面

将数组连接为一个字符串，再转换为字符串数组

 //渲染
    //封装到函数中去
    function init() {

      let num = ''
      //遍历对象，得到数据
      for (let i = 0; i < arr.length; i++) {
        num += ` 
        <tr>
          <td>${i+1}</td>
          <td>${arr[i].uname}</td>
          <td>${arr[i].age}</td>
          <td>${arr[i].gender}</td>
          <td>${arr[i].salary}</td>
          <td>${arr[i].city}</td>
          <td>
            <a href="javascript:" class="del" id =${arr[i].stuId}>删除</a>
          </td>
        </tr>   
      `

      }
      //渲染到页面
      tbody.innerHTML = num
    }
    init()

点击事件

点击添加增加数据

  //点击事件
    add.addEventListener('click', function () {
      //对象数据
      let obj = {
        //id号，选取最后一个id加1，防止无数据，进行一个判断
        stuId: arr.length > 0 ? arr[arr.length - 1].stuId + 1 : 1001,
        uname: unameEle.value,
        age: ageEle.value,
        gender: genderEle.value,
        salary: salaryEle.value,
        city: cityEle.value
      }
      console.log(obj);
      //添加对象元素
      arr.push(obj)
      // 调用函数
      init()
    })

点击删除数据

通过获取用户id，来实现删除用户数据操作

 //删除

    tbody.addEventListener('click', function (e) {
      if (e.target.className == 'del') {
        let id = e.target.id
        //1001
        console.log(id);
        
        for (let i = 0; i < arr.length; i++) {
          if (id == arr[i].stuId) {
            arr.splice(i, 1)
            init()
          }
        }
      }
    })

效果如下：