Web|动态创建表格案例 javascript|前端|开发语言|API

html

Document - 锐客网新增学员姓名：年龄：性别: name="gender" id="" class="gender"> 薪资：就业城市： name="city" id="" class="city"> 就业榜学号姓名年龄性别薪资就业城市操作 > //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: '北京' }, ]// 获取父元素tbody let tbody = document.querySelector('tbody') // 获取录入按钮 let btn = 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 render() { // 先干掉以前的数据让tbody里原来的tr都没有 tbody.innerHTML = '' // 再渲染新的数据 // 根据数据的条数来渲染增加tr for (let i = 0; i < arr.length; i++) { //创建tr let tr = document.createElement('tr')//tr里面放内容 tr.innerHTML = `${arr[i].stuId} ${arr[i].uname} ${arr[i].age} ${arr[i].gender} ${arr[i].salary} ${arr[i].city} ${i}">删除 ` // 把tr追加到tbody里 tbody.appendChild(tr); //复原所有的表单数据 uname.value = https://www.it610.com/article/age.value = salary.value =''; gender.value = 'https://www.it610.com/article/男' city.value = 'https://www.it610.com/article/北京' } } // 页面加载就调用函数写在上面下面都可以 render(); // 添加数据按钮btn.addEventListener('click', function() { // alert(1) // 获得表单里面的值，之后追加给数组arr 用push 往数组里追加的是一个对象 arr.push({ //得到数组最后一条数据的学号：1003 + 1 stuId: arr[arr.length - 1].stuId + 1, uname: uname.value, age: age.value, gender: gender.value, salary: salary.value, city: city.value }) // console.log(arr); render(); //重新渲染我们的函数 })// 删除操作删除的也是数组里面的数据我们用事件委托 tbody.addEventListener('click', function(e) { // 只有点击了a,才会执行删除操作 // 我们怎么知道你点击了a呢 //console.dir(e.target.tagName); if (e.target.tagName === 'A') { // alert(1) // 删除操作删除数组里面的数据 arr.splice(从哪里删，删几个) // 我要得到a的id //console.log(e.target.id); arr.splice(e.target.id, 1)render(); } })

user.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; } .infoinput { 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; }

效果展示 【Web|动态创建表格案例】