jquery表格排序

最新推荐文章于 2021-08-06 06:04:35 发布

caiyl1314

最新推荐文章于 2021-08-06 06:04:35 发布

阅读量701

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： js jquery 表格排序

本文链接：https://blog.youkuaiyun.com/cai7095576/article/details/26502907

jquery 专栏收录该内容

15 篇文章

订阅专栏

html代码

<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />  
<title>javaScrip基于对象</title>  
<style type="text/css">  
<!--  
.theadCss {  
    color: #FFF;  
    background-color: #000;  
}  
-->  
</style>  
</head>  
<body>  
<table >  
    <!-- 这里用thead,tbody 是为了方便 使用选择器 -->  
  <thead class="theadCss">  
    <tr>  
      <td>标号</td>  
      <td>名称</td>  
      <td>备注</td>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <td>4</td>  
      <td>doc</td>  
      <td>word</td>  
    </tr>  
    <tr>  
      <td>2</td>  
      <td>window</td>  
      <td>MicroSoft</td>  
    </tr>  
    <tr>  
      <td>3</td>  
      <td>kingsoft</td>  
      <td>wps</td>  
    </tr>  
    <tr>  
      <td>1</td>  
      <td>google</td>  
      <td>great</td>  
    </tr>  
    <tr>  
      <td>5</td>  
      <td>baidu</td>  
      <td>sb</td>  
    </tr>  
  </tbody>  
</table>  
</body>  
</html>

js代码

<script type="text/javascript" src="jquery-1.6.4.js"></script> 
<script language="javascript" type="text/javascript">  
$(document).ready(  
    function(){  
        //添加根据不同的列排序  
        $("thead > tr >td").eq(0).click(function(){sortTable(0);});  
        $("thead > tr >td").eq(1).click(function(){sortTable(1);});  
        $("thead > tr >td").eq(2).click(function(){sortTable(2);});  
});  
function sortTable(indexs){  
    //通过.get()  获取DOM元素(把jQuery 元素转换为DOM 元素)   
    var rows = $("tbody>tr").get();  
    //sort 排序  
    rows = rows.sort(function(a,b){  
        //排序不区分大小写  
        var keyA = $(a).find("td").eq(indexs).text().toUpperCase();  
        var keyB = $(b).find("td").eq(indexs).text().toUpperCase();  
        if(keyA < keyB){return -1;}  
        if(keyA > keyB){return 1;}  
        return 0;  
    });  
    //全部重新从尾部插入，这里因为已存在就移动到尾部  
    $.each(rows,function(index,row){$("table>tbody").append(row);});  
}  
</script>