js操作 动态生成表格结构、删除结构以及数据
<!DOCTYPE html> <html lang:"ZH-CN"> <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>学生数据</title> <style> table { border-collapse: collapse;/*属性设置表格的边框是否被折叠成一个单一的边框或隔开: 加上它跟真正的表格无异 去掉,则是标准显示*/ width:100%; /*宽度占浏览器的100%*/ } table, td, th { padding: 10; /*如需控制边框和表格内容之间的间距,应使用td和th元素的填充属性*/ border: 1px solid black; /*表示1像素的黑色黑线边框*/ text-align:right; /*针对文字,水平方向的右靠齐,可以改为left左,center中间*/ height:50px; /*行高*/ vertical-align:bottom; /*针对文字,默认显示垂直方向的居中,可以更改为top顶部,bottom底部*/ /* background-color:green; 背景颜色 */ /* color:white; 文字颜色 */ text-align: center; line-height: 50px; } </style> </head> <body> <table border:'1' width:'300' height:'30'> <thead> <tr> <th>姓名</th> <th>科目</th> <th>成绩</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> <script> //准备数据 var datas = [{ name : '李明', subject : 'English', score : 90 },{ name : '杨明', subject : 'English', score : 134 },{ name : '杨梅', subject : 'English', score : 12 },{ name : '嘉琦', subject : 'English', score : 230 }] // 获取元素 var tbody = document.querySelector('tbody'); for(var i= 0;i<datas.length;i++){ var tr = document.createElement('tr'); tbody.appendChild(tr); for(var k in datas[i]){ var td = document.createElement('td'); var as = document.createElement('a'); tr.appendChild(td).innerHTML=datas[i][k]; } var td = document.createElement('td') tr.appendChild(td).innerHTML='<a href="javascript:;">删除</a>'; } //获取触发的元素 var as = document.querySelector('tbody').querySelectorAll('a'); for (var i=0 ;i<as.length;i++){ as[i].onclick = function(){ // 删除元素 .removeChild() 且a链接在td里面只是一个格;所有我们要删除tr , // tr是a的父级的父级,所以是 this.parentNode.parentNode tr的父级则是tbody tbody.removeChild tbody.removeChild(this.parentNode.parentNode) } } </script> </body> </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)