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 { width: 80px; height: 25px; outline: none; border-radius: 5px; border:1px solid #b8daff; padding-left: 5px; } .info button { width: 60px; height: 25px; background-color: #004085; outline: none; border: 0; color: #fff; cursor: pointer; border-radius: 5px; } .info .age { width: 50px; }`

HTML结构`

新增学员

姓名：年龄：性别: 男女薪资：就业城市：北京上海广州深圳曹县录入

<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>`

下面开始JS部分： 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 add = document.querySelector('.add') 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')

     //  实现数据渲染
 function init () {
    let htmlStr = ''
                arr.forEach(function(item,index) {
                htmlStr +=`<tr>
                    <td>${index +1}</td>
                    <td>${item.uname}</td>
                    <td>${item.age}</td>
                    <td>${item.gender}</td>
                    <td>${item.salary}</td>
                    <td>${item.city}</td>
                    <td>
                    <a href="javascript:" class="del" id = ${item.stuId}>删除</a>
                    </td>
                </tr>`  
                })
                tbody.innerHTML = htmlStr
                uname.value = ''
                age.value = ''
                salary.value = ''
                }
 init()

实现数据的新增

         let obj = {
                    stuId: arr.length > 0?arr[arr.length-1].stuId +1:999,
                    uname: uname.value,
                    age: age.value,
                    gender: gender.value,
                    salary: salary.value,
                    city: city.value
         }
         arr.push(obj)
         init()
     })

实现数据的删除

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

JS制作简易信息管理系统

新增学员