<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> table { width: 500px; margin: 100px auto; border-collapse: collapse; text-align: center; } td, th { border: 1px solid #333; } </style> <body> <table> <thead> <td>角色</td> <td>法术</td> <td>法力</td> <td>操作</td> </thead> <tbody> </tbody> </table> <script> var dates= [{ name: '闻人翊悬', magic: '火系', main: 100 }, { name: '公仪楚人', magic: '土系', main: 80 }, { name: '申屠子夜', magic: '水系', main: 80 }, { name: '容成墨熙', magic: '木系', main: 90 }, { name: '轩辕神君', magic: '金系', main: 100 },]; var tbody=document.querySelector('tbody'); for(var i=0;i<dates.length;i++) { var tr=document.createElement('tr'); tbody.append(tr); for(var k in dates[i]) { var td=document.createElement('td'); td.innerHTML=dates[i][k]; tr.appendChild(td); } var td=document.createElement('td'); var del=document.createElement('a'); del.innerHTML='删除'; del.οnclick=function(){ tbody.removeChild(this.parentNode.parentNode); } td.appendChild(del); tr.appendChild(td); } </script> </body> </html>
动态生成表格
最新推荐文章于 2024-09-13 11:02:21 发布