标签：Sort 表格 Number Array 点击 innerText td 排序 isSort
点击表格表头，按照这一列的数据重新排列，点击一次降序，再点击升序，各列不会互相影响降序和升序的轮换。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>html</title>
<style>
table{
width: 500px;
height: 300px;
text-align: center;
}
</style>
</head>
<body>
<table border="1" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th onclick="sortTable(1)">力量</th>
<th onclick="sortTable(2)">敏捷</th>
<th onclick="sortTable(3)">智力</th>
</tr>
</thead>
<tbody>
<tr>
<td>悟空</td>
<td>17</td>
<td>24</td>
<td>13</td>
</tr>
<tr>
<td>唐僧</td>
<td>15</td>
<td>22</td>
<td>16</td>
</tr>
<tr>
<td>玉帝</td>
<td>19</td>
<td>15</td>
<td>20</td>
</tr>
<tr>
<td>杨戬</td>
<td>23</td>
<td>15</td>
<td>14</td>
</tr>
<tr>
<td>如来</td>
<td>16</td>
<td>8</td>
<td>54</td>
</tr>
</tbody>
</table>
<script>
var tbody = document.getElementsByTagName('tbody')[0]; //表格的内容
var tr_collection = tbody.children;
var isSort = [true,true,true];
const sortTable = function(row){
var td_Array = [];
for(let i=0;i<tr_collection.length;i++){
td_Array.push(tr_collection[i].children[row]) //把每一列的td元素添加到数组中
}
var td_Sort;
if(row ===1){
if(isSort[0]){
td_Sort = td_Array.sort((a,b)=>(Number(a.innerText)-Number(b.innerText)));
isSort[0] = !isSort[0];
}
else if(!isSort[0]){
td_Sort = td_Array.sort((a,b)=>(Number(b.innerText)-Number(a.innerText)));
isSort[0] = !isSort[0];
}
}
if(row ===2){
if(isSort[1]){
td_Sort = td_Array.sort((a,b)=>(Number(a.innerText)-Number(b.innerText)));
isSort[1] = !isSort[1];
}
else if(!isSort[1]){
td_Sort = td_Array.sort((a,b)=>(Number(b.innerText)-Number(a.innerText)));
isSort[1] = !isSort[1];
}
}
if(row ===3){
if(isSort[2]){
td_Sort = td_Array.sort((a,b)=>(Number(a.innerText)-Number(b.innerText)));
isSort[2] = !isSort[2];
}
else if(!isSort[2]){
td_Sort = td_Array.sort((a,b)=>(Number(b.innerText)-Number(a.innerText)));
isSort[2] = !isSort[2];
}
}
for(let j =0;j<td_Sort.length;j++){
tbody.appendChild(td_Sort[j].parentElement); //按照每一列的td排序之后，将td父元素
//也就是tr元素按顺序插入到tbody中
}
}
</script>
</body>
</html>
标签：Sort,表格,Number,Array,点击,innerText,td,排序,isSort 来源： https://blog.csdn.net/u010780755/article/details/113754901
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。