DOM：DOM基础操作之表格的渲染，上移、下移和删除操作

<style>
        table {
            border-collapse: collapse;
            margin: 100px auto;
        }

        td,
        th {
            padding: 10px;
            border: 1px solid #ccc;
        }
        button {
            border: none;
            background-color: skyblue;
        }
</style>
<script>
// 准备数据(模拟从数据库得到的)
let jsonData = {
            "head": ['学号', '姓名', '年龄', '分数', '操作'],
            "data": [
                {
                    "number": "001",
                    "name": "小茗",
                    "age": "18",
                    "score": "88"
                },
                {
                    "number": "002",
                    "name": "小翠",
                    "age": "22",
                    "score": "59"
                },
                {
                    "number": "003",
                    "name": "老王",
                    "age": "16",
                    "score": "55"
                },
                {
                    "number": "004",
                    "name": "学霸",
                    "age": "30",
                    "score": "99"
                },
                {
                    "number": "005",
                    "name": "老铁",
                    "age": "32",
                    "score": "68"
                },
                {
                    "number": "006",
                    "name": "小李",
                    "age": "22",
                    "score": "88"
                },
            ]
        }
        // 获取body，为了table能追加给body
		let body = document.body
        //1.创建table标签
        let table = document.createElement('table')
        body.appendChild(table)
        // 函数封装：渲染数据
        function renderData() {
            table.innerHTML = ''
            //2.创建表头th 有几个表头数据就创建几个th，因此要遍历上面的head数据
            for (let j = 0; j < jsonData.head.length; j++) {
                // 创建th标签，并添加内容
                let th = document.createElement('th')
                th.innerHTML = jsonData.head[j]
                // 追加tr标签给父级table
                table.appendChild(th)
            }
            //3.创建内容tr 有几条数据就创建几个tr，因此要遍历上面的data数据
            for (let i = 0; i < jsonData.data.length; i++) {
                let tr = document.createElement('tr')
                tr.innerHTML = `
                <td>${jsonData.data[i].number}</td>
                <td>${jsonData.data[i].name}</td>
                <td>${jsonData.data[i].age}</td>
                <td>${jsonData.data[i].score}</td>
                <td>
                <button class="pre" data-index="${i}">上移</button> <button class="next" data-index="${i}">下移</button> <button class="del" data-index="${i}">删除</button>   
                </td>
                `
                table.appendChild(tr)
            }
        }
        renderData()
        //4.上移 通过事件委托
        table.addEventListener('click', function (e) {
            if (e.target.className === 'pre') {
            // 如果当前按钮的index值已经是0，则提示已经到顶部了
                if (+e.target.dataset.index === 0) {
                    return alert('已经到顶部了')
                }
                // 当前内容
                let nowData = jsonData.data[e.target.dataset.index]
                // 当前内容的上一个内容
                let preData = jsonData.data[e.target.dataset.index - 1]
                // splice(删除位置的索引，删的个数,要添加的新数据)
                jsonData.data.splice(e.target.dataset.index, 1, preData)
                jsonData.data.splice(e.target.dataset.index - 1, 1, nowData)
                renderData()
            }
            //5.下移
            if (e.target.className === 'next') {
            // 如果当前按钮的index值已经是数据长度-1了，提示已经到底部了
                if (+e.target.dataset.index === jsonData.data.length - 1) {
                    return alert('已经到底部了')
                }
                // 当前内容
                let nowData = jsonData.data[e.target.dataset.index]
                // 当前内容的下一个内容
                let nextData = jsonData.data[+e.target.dataset.index + 1]
                jsonData.data.splice(e.target.dataset.index, 1, nextData)
                jsonData.data.splice(+e.target.dataset.index + 1, 1, nowData)
                renderData()
            }
            //6.删除
            if (e.target.className === 'del') {
                jsonData.data.splice(e.target.dataset.index, 1)
                renderData()
            }
        })
</script>

效果图如下：