表格渲染【不可以刷新版，学习一下简单语法】

先试用这个不可以刷新的表格渲染给其他的渲染方式做一个铺垫，先简单的理一下其中涉及到的相关语法。
表单图片

（1）先用HTML做一个简单地表格布局
（2）然后用css设计样式，给其美化
（3）用js实现交互效果
3.1 需要先动态创建一个数组，用于存放用户输入的数据
3.2 然后在用户点击过提交后将用户输入的数据渲染出来
3.3 然后实现一些小的功能如用户提交之后将所有表单置空
3.4 用户点击提交实现数据删除并重新渲染全部数据

css代码

* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #721c24;
}

h1 {
  text-align: center;
  color: #333;
  margin: 20px 0;

}

table {
  margin: 0 auto;
  width: 800px;
  border-collapse: collapse;
  color: #004085;
}

th {
  padding: 10px;
  background: #cfe5ff;

  font-size: 20px;
  font-weight: 400;
}

td,
th {
  border: 1px solid #b8daff;
}

td {
  padding: 10px;
  color: #666;
  text-align: center;
  font-size: 16px;
}

tbody tr {
  background: #fff;
}

tbody tr:hover {
  background: #e1ecf8;
}

.info {
  width: 900px;
  margin: 50px auto;
  text-align: center;
}

.info input,
.info select {
  width: 80px;
  height: 27px;
  outline: none;
  border-radius: 5px;
  border: 1px solid #b8daff;
  padding-left: 5px;
  box-sizing: border-box;
  margin-right: 15px;
}

.info button {
  width: 60px;
  height: 27px;
  background-color: #004085;
  outline: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  border-radius: 5px;
}

.info .age {
  width: 50px;
}

HTML代码

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

  <h1>就业榜</h1>
  <table>
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>就业城市</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- 
        <tr>
          <td>1001</td>
          <td>欧阳霸天</td>
          <td>19</td>
          <td>男</td>
          <td>15000</td>
          <td>上海</td>
          <td>
            <a href="javascript:">删除</a>
          </td>
        </tr> 
        -->
    </tbody>
  </table>

js代码

 <script>
    // 去除字符串两端的空白可以调用方法 trim()
    // 把数据存入一起，以方便以后的展示
    const arr = []
    /* 动态创建（创建的节点如下面的tr）的元素不可以添加事件 可以使用事件委托
    const a = document.querySelector('a') */
    const tbody = document.querySelector('tbody')
    const uname = document.querySelector('.uname')
    const age = document.querySelector('.age')
    const gender = document.querySelector('.gender')
    const salary = document.querySelector('.salary')
    const city = document.querySelector('.city')
    const info = document.querySelector('.info')
    // 属性选择器 获取所有的具有name属性值的标签
    const inps = document.querySelectorAll('.info [name]')

    // 表单事件不用click，一般使用submit
    info.addEventListener('submit', function (e) {
      // 阻止表单默认的submit事件
      e.preventDefault()
      // 提交之后保存之前需要查看是否每一项都是已填写
      for (let i = 0; i < inps.length; i++) {
      //空白字符也不可以，也需要除去两端空白字符
        if (inps[i].value.trim() === '') {
          return alert('内容必须认真填写每一项')
        }
      }
      // 创建对象
      const obj = {
        stuId: arr.length + 1,
        uname: uname.value,
        age: age.value,
        gender: gender.value,
        salary: salary.value,
        city: city.value,
      }
      // 保存数据
      arr.push(obj)
      // console.log(arr)

      reader()
      // 清除表单项内容
      info.reset()
    })
    // 函数封装
    function reader() {
      // 每次需要把原来的tbody给删除了，不然会有信息重合
      tbody.innerHTML = ''
      for (let i = 0; i < arr.length; i++) {
        // 创建tr
        const tr = document.createElement('tr')
        tbody.appendChild(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
            <a href="javascript:" data-id="${i}">删除</a>
          </td>
`
      }
    }
    // 删除按钮
    // 事件委托  因为动态创建的结点不可以直接获取使用
    tbody.addEventListener('click', function (e) {
      if (e.targrt.tagName === 'A') {
        arr.splice(e.target.dataset.id, 1)
      }
      reader()
    })
  </script>