<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-bordered mt-3">
<thead>
<tr>
<th><input type="checkbox" name="" id="checkAll"></th>
<th>ID</th>
<th>名字</th>
<th>年龄</th>
<th>班级</th>
<th>分数</th>
</tr>
</thead>
<tbody id="data">
<tr>
<td colspan="6">无内容</td>
</tr>
</tbody>
</table>
<button type="button" class="btn" onclick="setCheckArr()"> 删除选中</button>
<script>
//数据
let arr = [
{name:'第一个',age:'19',class:'三一班',fraction:'98'},
{name:'第二个',age:'17',class:'三五班',fraction:'97'},
{name:'第三个',age:'18',class:'三三班',fraction:'91'},
{name:'第四个',age:'16',class:'三二班',fraction:'88'}
];
getArr()
//遍历数据
function getArr(){
var tr = "";
for (let i = 0; i < arr.length; i++) {
tr +='<tr>'+
'<td><input type="checkbox" name="" class="ck"></td>'+
'<td>'+i+1+'</td>'+
'<td>'+arr[i].name+'</td>'+
'<td>'+arr[i].age+'</td>'+
'<td>'+arr[i].class+'</td>'+
'<td>'+arr[i].fraction+'</td>'+
'</tr>';
}
$('#data').html(tr);
}
//删除选中 数据
function setCheckArr(){
let cks = document.querySelectorAll('.ck');
console.log(cks.length);
for (let i = 0; i < cks.length; i++) {
console.log('第'+i+'为'+cks[i].checked);
if (cks[i].checked === true) {
arr.splice(i,1);
}
}
console.log(arr);
}
</script>
</body>
</html>
无法正确的删除勾选的数据
怎么能够高效的删除选中的数据
因为数据比较多有几百个
