表格数据点击排序

最新推荐文章于 2022-07-26 13:53:08 发布

welding_artist

最新推荐文章于 2022-07-26 13:53:08 发布

阅读量417

点赞数 1

本文链接：https://blog.csdn.net/u010780755/article/details/113754901

版权

HTML JavaScript 排序表格事件处理

关键词由CSDN通过智能技术生成

点击表格表头，按照这一列的数据重新排列，点击一次降序，再点击升序，各列不会互相影响降序和升序的轮换。

<!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>