爱站程序员基地
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>* {padding: 0;margin: 0;list-style: none;}table {margin: 0 auto;margin-top: 50px;}td {width: 100px;text-align: center;line-height: 30px;}button{border-radius: 5px;color: white;background-color: rgb(139, 29, 29);}</style></head><body><div class=\"container\"></div><script src=\"../JQ/JQuery.js\"></script><script>$(function () {let arr = [{id: 1,name: \'Simba\',age: 20},{id: 2,name: \'Jandy\',age: 18},{id: 3,name: \'Ace\',age: 19}]let table = $(\'<table/>\')let th1 = $(\'<th/>\').html(\'编号\')let th2 = $(\'<th/>\').html(\'姓名\')let th3 = $(\'<th/>\').html(\'年龄\')let th4 = $(\'<th/>\').html(\'操作\')let thead = $(\'<tr/>\').append(th1).append(th2).append(th3).append(th4)table.append(thead) //thead 生成完毕arr.forEach(r => { //给数组里的每个对象循环，循环一项添加一行let tr = $(\'<tr/>\')Object.values(r).forEach(v => { //将获取到的对象value值循环一遍，放进添的td里let td = $(\'<td/>\').html(v)tr.append(td) //td添加入行})let button = $(\'<button/>\').html(\'删除\').addClass(\'del\')//添加删除键let td = $(\'<td/>\').html(button)tr.append(td)table.append(tr) //行添加入表格})$(\'.container\').append(table)//表格添加入div$(\'.del\').click(function(){//点击删除，删掉整行$(this).parents(\'tr\').remove()})})</script></body></html>
