<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table { border-collapse: collapse; /* text-align: center; */ } th, tr, td, table { border: 1px solid gray; } </style> </head> <body> <div> <table> <thead> <th>表头</th> <th>表头</th> <th>表头</th> <th>修改</th> </thead> <tbody> </tbody> </table> </div> <script> var arr = [ { name: "张三", subject: "语文", score: "99" }, { name: "张三", subject: "语文", score: "299" }, { name: "张三", subject: "语文", score: "199" }, { name: "张三", subject: "语文", score: "9" } ] // 因没有数据库，故先创建一个数组里面放对象 let tbody = document.querySelector("tbody") // 获取元素 for (i = 0; i < arr.length; i++) { // 遍历数组 var tr = document.createElement("tr") // 创建行 tbody.appendChild(tr) // 添加行 for (var k in arr[i]) { // 遍历数组 let td = document.createElement("td") // 创建单元格 td.innerHTML = arr[i][k] // 导入单元格的内容，即从上面的数组中 tr.appendChild(td) // 添加单元格 } let td = document.createElement("td") // 创建删除列（单元格） td.innerHTML = "<a href='javascript:;'>删除</a>" // 导入a标签，删除 tr.appendChild(td) // 添加删除 单元格 let a=document.querySelectorAll("a") // 获取 所有a为一个数组 for(let i=0;i<a.length;i++){ // 遍历a a[i].onclick=function(){ // a 即删除点击事件 tbody.removeChild(this.parentNode.parentNode) // 删除 代码 } } } </script> </body> </html>
成果图
