jquery 生成表格

通过 jQuery 生成表格

• 使用 jquery 生成一个三行三列的表格

$(function () {//  on 委托  将 click 事件委托给 父级$(\'.container\').on(\'click\',\'.del\',function(){// 点击确认 即删除此时的数据  点击取消 不删除if(confirm(\'确认要删除吗？\')){$(this).parents(\'tr\').remove()}})// 对象数组  存放了三个对象let arr = [{id: 1,nickname: \'Simba\',age: 10}, {id: 2,nickname: \'Zero\',age: 20}, {id: 3,nickname: \'Ace\',age: 30},]// 创建 table、表头let table = $(\'<table/>\').addClass(\'tb\')// 三列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)// 循环数组  三行  r 即数组元素（每一个对象）arr.forEach(r => {let tr = $(\'<tr/>\')// 对象  键所对应的值  v 即代表每一个值// console.log(Object.values(r)) //  [1, \"Simba\", 10]   [2, \"Zero\", 20]   [3, \"Ace\", 30]Object.values(r).forEach(v => {let td = $(\'<td/>\').html(v)tr.append(td)})// 将操作按钮标签插入每行的最后一列   点击按钮时  删除表格当前的一条数据let button = $(\'<button/>\').html(\'删除\').addClass(\'del button button-primary button-rounded button-small\')let td = $(\'<td/>\').html(button)tr.append(td)table.append(tr)})$(\'.container\').append(table)})