JavaScript之动态表格渲染和删除表格数据
2022/8/8 1:24:24
本文主要是介绍JavaScript之动态表格渲染和删除表格数据,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<!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> <!-- <script src="/js/layui.js"></script> --> <link rel="stylesheet" href="/js/NES.css"> <style> </style> </head> <body> <div class="nes-table-responsive"> <table class="nes-table is-bordered is-centered"> <thead> <tr> <td>姓名</td> <td>年龄</td> <td>性别</td> <td>删除</td> </tr> </thead> <tbody> </tbody> </table> </div> </body> </html> <script> let vewData=[ { name:'张三', age:'18', gender:'男' }, { name:'武器大师', age:'46', gender:'男' }, { name:'不详之刃', age:'19', gender:'女' }, { name:'瑞萌萌', age:'20', gender:'女' } ]; //获取tbody的DOM对象 let tdby=document.querySelector('tbody'); //根据数组长度循环创建tr for (let i = 0; i < vewData.length; i++) { let tr=document.createElement('tr'); //根据数组对象中的数据循环创建td并赋值 for (const key in vewData[i]) { let td= document.createElement('td'); td.innerHTML=vewData[i][key]; tr.appendChild(td); } //最后创建删除按钮并追加 let detr=document.createElement('td'); let btn=document.createElement('button'); btn.innerHTML='删除'; detr.appendChild(btn); tr.appendChild(detr); tdby.appendChild(tr); } //获取tbody中的所有按钮DOM对象 let btns=tdby.querySelectorAll('button'); //循环绑定点击事件 for (let i = 0; i < btns.length; i++) { btns[i].onclick=function() { //获取当前按钮的父级的父级DOM也就是tr let tr= this.parentNode.parentNode; //再获取tr的父级 let tbodys=td.parentNode; //删除对应的tr tbodys.removeChild(tr); } } </script>
这篇关于JavaScript之动态表格渲染和删除表格数据的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?
- 2024-05-09企业src漏洞挖掘-有意思的命令执行
- 2024-05-08阿里云域名注册流程,分享给第一次购买域名的新手站长!