点击表格表头,按照这一列的数据重新排列,点击一次降序,再点击升序,各列不会互相影响降序和升序的轮换。
<!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>