JavaScript 点击表头，实现排序效果

最新推荐文章于 2023-04-26 14:27:49 发布

莽撞的铁牛

最新推荐文章于 2023-04-26 14:27:49 发布

阅读量501

点赞数 1

分类专栏： JAVA学习

本文链接：https://blog.csdn.net/qq_37758122/article/details/108412561

版权

JAVA学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<head>
    <meta charset="UTF-8">
    <title>哈哈哈哈</title>
</head>
<style>
table{
border-collapse:collapse;
width:90%;
}
tr{
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: lightgray;
height:35px;
}
      
td{
width:25%;
text-align:center;
}
    
a{
  text-decoration: none;
  color:skyblue;
} 
    
</style>
<script>
var col = 0;
var reverse = false;
function sort(column){
 if(column == col)
     reverse = !reverse;
 col = column;
 var tbody = document.getElementById("tbody");
 //通过getElementsByTagName取出来是一个Collection
 var trsCollection =  document.getElementsByTagName("tr");
 //因为Collection没有自带的排序函数，所以需要转换为数组，利用数组自带的排序
 var trs =new Array();
 for (var i=1; i <trsCollection.length; i++) {
    trs.push(trsCollection[i]);
 }
 trs.sort(comparator);
 for (var i=0; i <trs.length; i++) {
  tbody.appendChild(trs[i]);
 }
}
function comparator(tr1,tr2){
   var td1 = tr1.children[col].innerHTML; //取某一行的第col列中的内容
   var td2 = tr2.children[col].innerHTML;
   if(reverse)
    return td1.localeCompare(td2);
   else
    return td2.localeCompare(td1);
}
</script>
<table>
   <tbody id="tbody">
   <tr >
       <td ><a  href="javascript:void(0)"  onclick="sort(0)">id</a></td>
       <td ><a  href="javascript:void(0)"  onclick="sort(1)">名称</a></td>
       <td ><a  href="javascript:void(0)"  onclick="sort(2)">血量</a></td>
       <td ><a  href="javascript:void(0)"  onclick="sort(3)">伤害</a></td>
    </tr>
   <tr >
       <td>1</td>
       <td>c</td>
       <td>340</td>
       <td>58</td>
    </tr>
   <tr >
       <td>2</td>
       <td>a</td>
       <td>320</td>
       <td>76</td>
    </tr>
   <tr >
       <td>3</td>
       <td>d</td>
       <td>380</td>
       <td>38</td>
    </tr>
   <tr >
       <td>4</td>
       <td>c</td>
       <td>400</td>
       <td>90</td>
    </tr>
    </tbody>
</table>

莽撞的铁牛

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
JavaScript 点击表头，实现排序效果

<head> <meta charset="UTF-8"> <title>哈哈哈哈</title></head><style>table{border-collapse:collapse;width:90%;}tr{border-bottom-style: solid;border-bottom-width: 1px;border-bottom-color: lightgray;height:35p
复制链接

扫一扫