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)
        })