<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
margin: 100px auto;
border-collapse: collapse;
}
th,
td {
border: 1px solid #000;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>分数</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>大花</td>
<td>18</td>
<td>88</td>
<td><button>上移</button><button class>下移</button><button>删除</button></td>
</tr>
</tbody>
</table>
<script>
let jsonData = {
"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"
},
]
}
const tbody = document.querySelector('tbody')
function updated() {
let tbodyStr = ``
jsonData.data.forEach((item, index) => {
tbodyStr +=
`<tr data-index="${index}">
<td>${item.number}</td>
<td>${item.name}</td>
<td>${item.age}</td>
<td>${item.score}</td>
<td>
<button>上移</button><button class>下移</button><button>删除</button>
</td>
</tr>`
})
tbody.innerHTML = tbodyStr
}
updated()
let data = jsonData.data
tbody.addEventListener('click', function (e) {
if (e.target.innerHTML === '上移') {
console.log(e.target.parentNode.parentNode.dataset.index)
const index = parseInt(e.target.parentNode.parentNode.dataset.index)
if (index == 0) return console.log('到顶了')
data.splice(index-1, 0, data[index])
data.splice(index+1,1)
updated()
}
if(e.target.innerHTML === '下移'){
const index = parseInt(e.target.parentNode.parentNode.dataset.index)
if (index == data.length-1) return console.log('到底了')
data.splice(index + 2, 0, data[index])
data.splice(index, 1)
updated()
}
if(e.target.innerHTML==='删除'){
const index = parseInt(e.target.parentNode.parentNode.dataset.index)
data.splice(index,1)
updated()
}
})
</script>
</body>
</html>
