方法: 看到这个表单 首先进行思路分析!!

第一步

1.1 因为是要将输入的信息输入到下方表单中, 因此要考虑到上方用户输入信息的可用性

1.2 首先找到需要输入的表单元素(css选择器),也就是调用元素
// 首先创建三个标签 将数组的信息分别打印进去标签里面 然后把标签放进tbody中的最后面 // 先找出所有需要用到的元素

      let tbody = document.querySelector('tbody') // 装tr标签的元素
      let age = document.querySelector('.age') // 年龄
      let uname = document.querySelector('.uname')  // 姓名
      let city = document.querySelector('.city') // 成熟
      let salary = document.querySelector('.salary')  // 薪水
      let gender = document.querySelector('.gender') // 性别
      let add = document.querySelector('.add')   // '录入'按钮
      let form = document.querySelector('form')   // 表单

      for (let i = 0; i < arr.length; i++) {
        let tr = document.createElement('tr')  // 创建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>
             <button class="up">上移</button>
             <button class="down">下移</button>
             <a href="javascript:" class="delete">删除</a>
           </td>
        `
        
        tbody.appendChild(tr)

      }

第二步

1.3 表单元素存在默认事件(默认行为) 每次输入信息后点击会被带进别的事件中(比如跳转页面),需要进行默认事件阻止

1.4 因为性别和就业城市是下拉表单元素,不需要用户输入信息,因此在给"录入"按钮注册事件时只需要考虑 姓名、年龄以及信息三个表单元素的信息的输入情况即可

1.5

• 如果不满足条件弹出警告框,form表单数据清空
  

• 如果满足,创建新标签,标签内部放入相应的元素,放入tbody中的最后方,并且清空数据,用来进行新的信息输入

      // 注册点击事件  先检测内部消息输入情况
      add.onclick = function (e) {
        e.preventDefault() // 关闭表单默认样式

        if (uname.value.trim() == '' || age.value.trim() == '' || salary.value.trim() == '') { // 判断文字信息
          alert('请输入正确的信息!!!')
          form.reset() 
        } else { // 否则打出表单,创建标签

          let tr = document.createElement('tr')

          tr.innerHTML = `
              <td>1001</td>
              <td>${uname.value}</td>
              <td>${uname.age}</td>
              <td>${uname.gender}</td>
              <td>${uname.salary}</td>
              <td>${uname.city}</td>
              <td>
                 <button class="up">上移</button>
                 <button class="down">下移</button>
                <a href="javascript:" class="delete">删除</a>
              </td>
          `

          tbody.appendChild(tr)
        }
      }

第三步

1.6 对删除、上移、下移三种功能进行事件委托,因为三个按钮都是动态生成的,一开始没有,无法找到

1.7 由于tbody标签不是动态新增的,因此对他们的父元素tbody注册事件,然后指定目标区域进行事件委托,这种方法用于对变动生成的tr标签使用,用来准确找到里面的功能按钮

1.8

• 对于删除功能,点击这个删除按钮所在区域,然后整个父元素tr全部删除
• 对于上移功能,如果这个tr标签前面存在元素,才能进行交换位置,把这个元素放到前面的元素的前面
• 对于下移功能,如果这个tr标签后面存在元素,才能进行交换位置,把这个元素放到后面的后面的元素的前面
• 注意这里不要单独设置三个if结构语句 因为这样的话第一个if条件不生效 后面的其他if条件仍然会进行运行 这样会增加网页加载判断的时间和负担
• 直接使用一个if结构语句 其他的条件不生效的话直接取消运行if语句 增减网页运行速度和效率

      tbody.onclick = function (e) {
       // 将指向的真正点击的子元素的父亲的父亲设定为tr标签
        let tr = e.target.parentNode.parentNode // tr 元素
        
        if (e.target.classList.contains('delete')) { // 将点击的事件委派给里面的删除键  设定里面的点击生效范围    
          
          tbody.removeChild(tr)
          
        } else if (e.target.classList.contains('up')) {

          if (tr.previousElementSibling) { // 如果前面有tr标签 生效 
            tbody.insertBefore(tr, tr.previousElementSibling) // 将当前元素放到前面的元素的前面
          }
        } else if (e.target.classList.contains('down')) {

          if (tr.nextElementSibling) { // 如果后面有tr标签 生效
            tbody.insertBefore(tr, tr.nextElementSibling.nextElementSibling) // 将当前元素放到后面的后面的元素的前面
          }
          
        }

      }