问题：
我把表格每一行的id都设置成“HANG”，但是$("#HANG").remove()却删不干净。
我把数据写死了，代码在下面，大家可以直接运行测试。
当点击下一页时不会删干净。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
let Data=[{"author":"EQ","date":"2011.1.1","money":"25","name":"人类的历史","store":68},
{"author":"OOK","date":"2011.1.2","money":"87","name":"人类的诞生","store":90},
{"author":"IJKKJ","date":"2033.2.1","money":"89","name":"天上有几颗星星","store":90},
{"author":"OLL","date":"1999.1.1","money":"18","name":"宇宙的未来","store":3000},
{"author":"OKJJ","date":"2033.1.2","money":"88","name":"宇宙的起源","store":120},
{"author":"DSAQ","date":"2000.1.2","money":"90","name":"牛鼻是怎样吹起来的","store":90},
{"author":"ZZA","date":"2012.10.1","money":"125","name":"钢铁是怎样炼成的","store":80}];
let PAGE=0;
let Page_Max;//从0开始
let ZData=[];//总表
function processPage(x){
// 分页
if(x===undefined){
alert("传参错误");
}
let q=Data.length/x;
let qq=Data.length%x;
let Q=Math.ceil(q);
Page_Max=Q-1;
let smallZData=[];
let eIndex=0;//下标尾
let bIndex=0;//下标始
eIndex=x;
// alert("q="+q+"qq="+qq+"Q="+Q);
for(let begin=1;begin<=Q;begin++){
// alert("第"+begin+"次循环"+"bindex="+bIndex+"ebinex="+eIndex);
for(;bIndex<eIndex;bIndex++){
smallZData.push(Data[bIndex]);
}
ZData.push(smallZData);
if(begin+1===Q&&q>0){
eIndex+=qq;
}else{
eIndex+=x;
}
smallZData=[];
}
console.log(ZData);
}
function nextPage(){
if(PAGE===Page_Max){
PAGE=0;
}
else {
PAGE+=1;
}
// alert("下一页"+PAGE);
$("#HANG").remove();
useData(ZData[PAGE]);
}
function lastPage(){
if(PAGE===0){
PAGE=Page_Max;
}
else{
PAGE-=1;
}
$("#HANG").remove();
// alert("上一页"+PAGE);
useData(ZData[PAGE]);
}
function updateData() {
$("#HANG").remove();
useData(ZData[PAGE]);
}
function useData(hangList) {
let tbody = document.getElementById("tbody")
// let tbody = document.getElementById("tbody")
for (let a = 0; a < hangList.length; a++) {
let row = getRow(hangList[a]);
tbody.append(row);
console.log(row.getAttribute("id"));
}
}
function getRow(hangOneLie) {
let trow = document.createElement("tr");
trow.setAttribute("id","HANG");
let input = document.createElement("input");
input.setAttribute("type", "checkbox");
trow.append(input);
let hang = ["name", "author", "store", "money", "date"];
for (let qq = 0; qq < hang.length; qq++) {
let td = document.createElement("td");
td.innerHTML = hangOneLie[hang[qq]];
trow.appendChild(td);
}
return trow;
}
</script>
</head>
<body onload="processPage(3)">
<table>
<thead>
<tr>
<th>
<input type="checkbox"/>
</th>
<th>name</th>
<th>author</th>
<th>store</th>
<th>money</th>
<th>date</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
<button onclick="updateData()">刷新</button>
<button onclick="lastPage()">上一页</button>
<button onclick="nextPage()">下一页</button>
</body>
</html>
id只能有一个 。 得用class
while ($("#HANG").length > 0)
{
$("#HANG").remove();
}
用上面代码已解决。
但是还是不清楚原来的为何删不尽。
求解，
你不应该用id，而应该用class，因为ID选择器只能选中一个匹配元素