js动态排序表格
这一次写一写js动态排序表格，动态排序表格在前端书写后端页面时常见。我觉得平时应该不会常见的，当然这是我个人的理解，勿怪。话不多说，开干！
动态排序表格效果
页面准备
页面浏览：
动态排序表格需求：
动态排序表格顾名思义就是可以排序，
首先可以看上图，前面都是复选框，第一行表示的是全选框，这些按钮的需求是我点击全选框时，下面的五个复选框同时全部是选中状态；或者是点击下面的复选框时，一个一个点击，五个全部点击显示选中状态，那么全选框就变成选中状态，如果没有全部选中，那么全选框就不显示选中状态。
然后可以看见第一行的各种标题，编号、姓名、年龄、职位。我要做的是当我点击这四个标题中的一个是，它会自动把它所在那一列的内容排序。
最后------让思路变成代码，跑起来吧！！！
HTML：
html，css就不多解释了，直接把代码放上来了。
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>动态排序表格</title><linkrel="stylesheet"href="./index.css"></head><body><tableclass="table-container"><thead><tr><th><inputtype="checkbox"name=""id=""class="checkbox"></th><th>编号</th><th>姓名</th><th>年龄</th><th>职位</th></tr></thead><tbody><tr><td><inputtype="checkbox"name=""id=""></td><td>3</td><td>李同学</td><td>24</td><td>C++程序员</td></tr><tr><td><inputtype="checkbox"name=""id=""></td><td>5</td><td>张同学</td><td>24</td><td>PHP工程师</td></tr><tr><td><inputtype="checkbox"name=""id=""></td><td>6</td><td>黄同学</td><td>21</td><td>交互设计师</td></tr><tr><td><inputtype="checkbox"name=""id=""></td><td>17</td><td>魏同学</td><td>28</td><td>WEB前端</td></tr><tr><td><inputtype="checkbox"name=""id=""></td><td>22</td><td>边同学</td><td>30</td><td>测试员</td></tr></tbody></table><scriptsrc="./index.js"></script></body></html>
css:
*{margin: 0;padding: 0;box-sizing: border-box;}.table-container{width: 500px;text-align: center;margin: 100px auto;}tr:hover{background-color: #f5f7fa;}th{cursor: pointer;line-height: 50px;}table{border-collapse: collapse;}td,
th{height: 50px;border: 1px solid #ccc;}input{width: 18px;height: 18px;cursor: pointer;}
js：
首先是写一个立即执行函数，避免全局变量和函数的冲突.也可以也可以减少闭包的占用内存问题。然后先写一个主函数，方便代码书写，主要是不容易晕（嘿嘿，调侃一下）。
首先是对复选框的有关操作，点击全选框时，下面的五个复选框同时全部是选中状态；我是这样想的，首先是全选按钮的事件，要首先获取到全选按钮的dom元素，然后给全选按钮的dom绑定鼠标点击事件，然后获取dom节点的选中状态，
input
元素中checked表示按钮选中的状态，checked为true就是代表选中状态，为false就是代表未选中状态，然后获取到下面的input的全部dom，然后遍历循环它，给每一项的checked状态都设成刚才获取的dom节点的选中状态。
继续写对复选框的有关操作，点击下面的复选框时，一个一个点击，五个全部点击显示选中状态，那么全选框就变成选中状态，如果没有全部选中，那么全选框就不显示选中状态。首先是给下面的input注册鼠标点击事件，并且进行事件委托，用来准确的找到复选框进行事件的触发，然后在定义一个代表下面input选中的个数变量，然后遍历input，在里面做判断，如果input被选中，定义选中的复选框的个数的变量就自增，遍历完成后，如果下面input的选中状态等于所有的下面input的个数时，那么全选框就赋值true，表示选中。反之就赋值false，表示未选中，也就是全选框是不选中的状态。
然后开始写标题：编号、姓名、年龄、职位。要做的是当点击这四个标题中的一个是，它会自动把它所在那一列的内容排序。把这四个标题拆开看，可以看出来编号，年龄是数字，姓名和职位是汉字，所以我们先写数字，先获取到其相对应的th，td的dom
然后循坏遍历th，就是标题。因为全选框是下标为0，所以首先判断是否下标为0，为0就return，什么也不干。然后给th注册鼠标点击事件，在事件里面首先是把tr变为真数组，在进行排序，如果下标是2和4就中文排序的相关方法，是1和3就数字排序的相关方法：
var arr =Array.prototype.slice.call(tr).sort(function(a, b){if(index ===2|| index ===4){return a.getElementsByTagName('td')[index].innerHTML.localeCompare(b.getElementsByTagName('td')[index].innerHTML,'zh');//中文处理}elseif(index ===1|| index ===3){return a.getElementsByTagName('td')[index].innerHTML - b.getElementsByTagName('td')[index].innerHTML;//数字处理}})
然后插入数据，最后调用一下程序总函数就ok了。
js代码：
(function(){var check = document.querySelector('.checkbox');//获取全选按钮元素var tbodyThAll = document.querySelector('tbody');//获取tbody元素var input = tbodyThAll.getElementsByTagName('input');//获取tboby元素中的所有input元素var thead = document.querySelector('thead');var ths = thead.querySelectorAll('th');//获取thead下面的th元素var tr = tbodyThAll.querySelectorAll('tr');// 程序总函数varmain=functionmain(){mainEvent();}// 所有事件函数的绑定varmainEvent=function(){
check.addEventListener('click', onCheckAll);
tbodyThAll.addEventListener('click', onTbobyAll);for(var i =0; i < ths.length; i++){thClick(ths[i], i);}}// 全选按钮的事件函数的绑定varonCheckAll=function(){// 获取dom节点的选中状态 checked表示的是按钮是否选中var checkStatus =this.checked
// 循环tboby下面的input元素for(var i =0; i < input.length; i++){// 给每一项input元素的checked值赋值与全选按钮一样，可以显示一样是否选中
input[i].checked = checkStatus;}}// tboby下面的input事件绑定函数varonTbobyAll=function(e){// 事件目标的获取，准确的找到复选框进行事件的触发if(e.target.tagName !=='INPUT'){return;}// 定义一个已经点击选中的复选框的数字var indexInput =0;// 遍历input,for(var i =0; i < input.length; i++){// 如果input被选中，indexInput就++if(input[i].checked){
indexInput++;}}// 当input被选中的个数等于tboby下面所有的input个数时，全选框就选中，反之就是不选中状态if(indexInput === input.length){
check.checked =true;}else{
check.checked =false;}}// 定义th的点击事件varthClick=function(th, index){if(index ===0){return;}
th.addEventListener('click',function(){// 先把tr变为数组,进行排序操作var arr =Array.prototype.slice.call(tr).sort(function(a, b){// 中文处理if(index ===2|| index ===4){return a.getElementsByTagName('td')[index].innerHTML.localeCompare(b.getElementsByTagName('td')[index].innerHTML,'zh');}elseif(index ===1|| index ===3){return a.getElementsByTagName('td')[index].innerHTML - b.getElementsByTagName('td')[index].innerHTML;//数字处理}})// 插入数据for(var i =0; i < arr.length; i++){
tbodyThAll.appendChild(arr[i]);}})}main();//程序总函数的调用})()
若有错误，敬请改正。让我们一起加油！！！
版权归原作者 前端小贺 所有， 如有侵权，请联系我们删除。