js简单实现表格排序
昨天看到一篇关于表格排序的随笔，鉴于本人还只会简单的js，不会使用封装，所以自己也试了一下写这个效果。可能不太优化，原理思路是：获取行对象tr，排序tr中要比较的对象td，排序后添加回tbody。如下：
样式如下：
<style>thead tr td{ cursor: pointer;}thead tr td:hover{ text-decoration: underline;}</style>
结构如下：
<table><thead><tr><td>姓名</td><td>性别</td><td id="score">成绩</td></tr></thead> <tbody> <tr> <td>hoho</td> <td>女</td> <td>65</td> </tr> <tr> <td>haha</td> <td>男</td> <td>73</td> </tr> <tr> <td>hehe</td> <td>女</td> <td>67</td> </tr> </tbody> </table>
js代码：
<script> var score=document.getElementById('score'); var tbody=document.getElementsByTagName('tbody')[0]; //获取文档下的第一个tbdoy var tr=tbody.getElementsByTagName('tr'); //获取tbody下的tr（数组） var arr=[]; var isAsc=true; //判断当前排序是否是正序 score.onclick=function(){ if(!isAsc){ //如果是反序，则进行一下操作 for(var i=0;i<tr.length;i++){ arr.push(tr[i]); //把tr数组复制到arr数组 } arr.sort(function(tr1, tr2){ //数组排序arr.sort() var value1 = tr1.getElementsByTagName('td')[2].innerHTML; var value2 = tr2.getElementsByTagName('td')[2].innerHTML; return value2.localeCompare(value1); //localeCompare() 方法提供的是比较字符串的方法，如果value2>value1,则返回1；如果value2<value1,则返回-1;相等则0 }); Oinsert(); //进行文档添加操作 isAsc=true; //点击之后反转一下顺序 } else { //如果是正序，则进行一下操作 for(var i=0;i<tr.length;i++){ arr.push(tr[i]); } arr.sort(function(tr1, tr2){ var value1 = tr1.getElementsByTagName('td')[2].innerHTML; var value2 = tr2.getElementsByTagName('td')[2].innerHTML; return value1.localeCompare(value2); }); Oinsert(); isAsc=false; } }
function Oinsert(){ //向文档添加已排好序的节点 var fragment=document.createDocumentFragment(); //当你想提取文档的一部分，改变，增加，或删除某些内容及插入到文档末尾可以使用createDocumentFragment() 方法 for(var j=0;j<arr.length;j++){ fragment.appendChild(arr[j]); //把数组中的元素添加到节点的子节点列表的末尾 } tbody.appendChild(fragment); //把fragment添加到tbody }</script>
运行界面：
大家复制代码就可以看到效果啦！