jQuery手动生成表格，右侧带删除按钮

技术2022-07-10 129

<!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>

Processed: 0.011, SQL: 9