zoukankan      html  css  js  c++  java
  • 表格排序

    数组中有一个sort方法,用于数组排序,sort可以接收一个参数,指明比较函数。

    定义比较函数

       //比较函数
    function compareFun(value1,value2){ if(value1 > value2){ return 1; }else if(value1 < value2){ return -1; }else { return 0; } }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="shortcut icon" type='image/x-icon' href="img/tab.ico">
        <title>表格排序</title>
    
        <style>
        #tabSort tr{text-align: center}
        #tabSort th{cursor: pointer}
        #tabSort img{
            32px;
            height:32px;
        }
        </style>
    </head>
    <body>
    
    <h5>表格排序</h5>
    <table id='tabSort' border=1>
        <thead>
            <tr>
                <th onclick="sortTable('tabSort',0,'string')">name</th>
                <th onclick="sortTable('tabSort',1,'int')">age</th>
                <th onclick="sortTable('tabSort',2,'date')">birthday</th>
                <th onclick="sortTable('tabSort',3)">details</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Alice</td>
                <td>22</td>
                <td>1993-5-5</td>
                <td sortValue='png' ><img src="img/user1.png" ></td>
            </tr>
            <tr>
                <td>Sunny</td>
                <td>21</td>
                <td>1994-3-3</td>
                <td sortValue='png' ><img src="img/user2.png" ></td>
            </tr>
            <tr>
                <td>Jenny</td>
                <td>23</td>
                <td>1992-2-2</td>
                <td sortValue='jpeg' ><img src="img/user3.jpeg" ></td>
            </tr>
            <tr>
                <td>Sara</td>
                <td>25</td>
                <td>1990-12-12</td>
                <td sortValue='bmp' ><img src="img/user4.bmp" ></td>
            </tr>
            <tr>
                <td>Coco</td>
                <td>24</td>
                <td>1991-1-1</td>
                <td sortValue='jpeg' ><img src="img/user5.jpeg" ></td>
            </tr>
        </tbody>
    </table>
    
    
    <script>
    
    function sortTable(tabId,sortCol,dataType){
        var tab=document.getElementById(tabId);
        var tBody=tab.tBodies[0];
        var tRows=tBody.rows; //获取tBody中的行 排除thead
        var rowArr=[]; //tRows不是真正的数组,不能直接使用sort(Array的方法)函数,所以先存成数组
        for(var i=0,len=tRows.length;i<len;i++){
            rowArr[i] = tRows[i];
        }
        //对各行进行排序
        if(tab.sortFlag!=sortCol){
            var compFunc=getCompareFun(sortCol,dataType);
            rowArr.sort(compFunc);
        }else{ 
            rowArr.reverse(); //已经排序过,再进行一次逆序排列
        }
         
        //将排序的结果追加至表中
        for(var j=0,len=rowArr.length;j<len;j++){
            tBody.appendChild(rowArr[j]);  // appendChild中引用的是表中行元素,只存在一个该行元素
        }
        tab.sortFlag=sortCol;
    }
    //获取排序函数 传给sort函数
    function getCompareFun(colIndex,dataType){
        return function compareFun(tr1,tr2){
            var value1=tr1.cells[colIndex].getAttribute('sortValue');
            var value2=tr2.cells[colIndex].getAttribute('sortValue');
            if(value1==undefined || value2==undefined){
                value1 = convert(tr1.cells[colIndex].firstChild.nodeValue,dataType);
                value2 = convert(tr2.cells[colIndex].firstChild.nodeValue,dataType);
            }
            if(value1 > value2){
                return 1;
            }else if(value1 < value2){
                return -1;
            }else {
                return 0;
            }
        }
    }
    function convert(value,dataType){
        switch(dataType){
            case "int":
            return parseInt(value);
            break;
            case "string":
            return value.toString();
            break;
            case "date":
            return +new Date(Date.parse(value));  //转换成毫秒数
            break;
            default:
            return value.toString();
        }
    }
        
    </script>
        
    </body>
    </html>
    View Code
  • 相关阅读:
    mysql的小练习
    实用IMX6开发板来袭, 方便开发板方便你
    又到开学季 学习神器走一波 物联网开发板
    如何修改开发板主频--迅为iMX6UL开发板
    迅为4412开发板实战之智能网关项目
    iTOP-iMX6开发板Android系统下LVDS和HDMI双屏异显方法
    恩智浦iMX6Q核心板/飞思卡尔Cortex-A9高稳定性低功耗开发板
    嵌入式ARM开发板学习方法步骤
    迅为iMX6UL Cortex-A7架构单核ARM开发板接口介绍-支持定制
    三星系列NXP系列核心板设计研发-迅为嵌入式ARM方案提供商
  • 原文地址:https://www.cnblogs.com/lydialee/p/4260807.html
Copyright © 2011-2022 走看看