接收后台传来的数据,在页面创建表格,表格:增,删,改,查javascript

mac2025-12-28 6

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> table, td { border: 2px solid #000; } table { width: 800px; height: 500px; margin: 100px auto; border-collapse: collapse; } </style> </head> <body> <div></div> <table> <thead> <tr> <td>姓名</td> <td>年龄</td> <td>性别</td> <td>保/留</td> </tr> </thead> <tbody> </tbody> </table> <script type="text/javascript"> //数组里面的内容是灵活可以随意添加 var arr = [ { name: 'Jack', age: 18, gender: '男' }, { name: 'Rose', age: 20, gender: '女' }, { name: 'Top', age: 22, gender: '男' }, { name: 'Rose', age: 20, gender: '女' }, { name: 'Top', age: 22, gender: '男' }, { name: 'Rose', age: 20, gender: '女' }, { name: 'Top', age: 22, gender: '男' }, { name: 'Jack', age: 18, gender: '男' }, { name: 'Jack', age: 18, gender: '男' } ] //获取表格 var tab = document.querySelector("tbody") //通过forEach循环进行遍历 arr.forEach(function(value,index){ //创建一个tr var tr = document.createElement("tr") //用for循环来创建<td>然后赋值给tr; 将表格内容添加到tdz中 for(let i in value){ let td = document.createElement("td") td.innerHTML = value[i] tr.appendChild(td) } //将后台传来的数据中, 在末尾添加一个删除按钮,页面展示 //再在for循环外面创建一个<td></td> var td = document.createElement("td") tr.appendChild(td) //创建一个删除按钮 <span></span> var sp = document.createElement("span") //赋值 sp.innerHTML = "删除" //点击的时候删除表格 sp.onclick= function(){ this.parentNode.parentNode.remove(); } / td.appendChild(sp) tab.appendChild(tr) }) </script> </body> </html>

最新回复(0)