动态创建表格（各种管理系统常见）

该案例实现的功能有
功能1.将后端默认数据添加进去
功能2.录入按钮点击之后，将其信息插入到表格中
功能3.删除操作
功能4.将数据存储在本地
▲注意：数据不管是添加还是删除完，都需要重新渲染

功能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: '北京' },
      ]
      //基本数据录入（分析:我们要把数组里的元素放在表格中，那我们可以根据数据的条数，渲染创建tr）
      // 1.获取元素
      // （我们数组中的元素要插入在表格的tbody中，所以获取tbody）
      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");

      // 2.渲染函数
      function render(){
        for(let i=0;i<arr.length;i++){
          // 创建节点
          let tr=document.createElement('tr')
          //节点内容
          tr.innerHTML=` <td>${arr[i].stuId}</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:">删除</a>
        </td>`
        //追加节点
        tbody.appendChild(tr)
        }
      }
      render()//调用
       arr=getData()//存储数据
    // 功能1.录入按钮点击之后，将其信息插入到表格中

功能2.录入按钮点击之后，将其信息插入到表格中

• 通过程序添加数据，我们可以通过创建节点，将数据添加进去
• 复原表单元素，重新赋值即可

// 功能1.录入按钮点击之后，将其信息插入到表格中
      // 1、获取标签
      let btn=document.querySelector('.add')
      // 2.注册事件
      btn.addEventListener('click',function(){
        arr.push({
          stuId: arr[arr.length - 1].stuId + 1,
          uname: uname.value,
          age: age.value,
          gender: gender.value,
          salary: salary.value,
          city: city.value,
        })
        render();
        //复原表单元素
        uname.value = age.value = salary.value = "";
        gender.value = "男";
        city.value = "北京";
      })

功能3.删除操作
因为这些数据是我们通过节点追加进去的，所以我们可以通过事件委托，来进行删除

//事件委托 找当前对象的找父元素
 tbody.addEventListener('click',function(e){
        if(e.target.tagName==='A'){
        //通过数组splice删除方法 arr.splice(从哪里开始删，1)
          arr.splice(e.target.id,1)
          render();
        }
      })

功能4.将数据存储在本地
分析：如果localstorage里面没有数据使用arr, 如果有数据,获取localstorage里面的数据并使用 – 封装函数 : 无论是添加还是删除都要基于已经存储的数据进行操作

function getData(){
        let data=localStorage.getItem('userInfo')
        if(data){
          return JSON.parse(data)
        }
        else{
          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: '北京' },
    ]
    localStorage.setItem('userInfo',JSON.stringify(arr))
        }
      }