经典的表格排序

最新推荐文章于 2024-04-27 14:45:30 发布

莳心

最新推荐文章于 2024-04-27 14:45:30 发布

阅读量530

点赞数

文章标签： function date float table border action

本文链接：https://blog.csdn.net/shz2008bj/article/details/2254807

版权

<html>
<head>
<title>SortTable2 From:网络大本营 Http://www.QQView.com</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
/**************************************************************************
排序的主方法，有三个形参，STableTd,iCol,sDataType分别为需要排序的表格ID，
需要排序的表格列号，所在列的数据类型（支持int,float,date,string四种数据类型)
**************************************************************************/
function ieOrFireFox(ob){
     if (ob.textContent != null)
     return ob.textContent;
     var s = ob.innerText;
     return s.substring(0, s.length);
}

//排序 tableId: 表的id,iCol:第几列；dataType：iCol对应的列显示数据的数据类型
function sortAble(tableId, iCol, dataType){

     var table = document.getElementById(tableId);
    var tbody = table.tBodies[0];
    var colRows = tbody.rows;
    var aTrs = new Array;


    //将将得到的列放入数组，备用
    for (var i=0; i < colRows.length; i++) {
         aTrs[i] = colRows[i];
    }

//判断上一次排列的列和现在需要排列的是否同一个。
    if (table.sortCol == iCol) {
        aTrs.reverse();
    } else {
     //如果不是同一列，使用数组的sort方法，传进排序函数

         aTrs.sort(compareEle(iCol, dataType));
    }
    var oFragment = document.createDocumentFragment();


    for (var i=0; i < aTrs.length; i++) {
        oFragment.appendChild(aTrs[i]);

    }
    tbody.appendChild(oFragment);
     //记录最后一次排序的列索引
    table.sortCol = iCol;
}
//将列的类型转化成相应的可以排列的数据类型
function convert(sValue, dataType) {
     switch(dataType) {
     case "int":
         return parseInt(sValue);
     case "float":
         return parseFloat(sValue);
     case "date":
         return new Date(Date.parse(sValue));
     default:
         return sValue.toString();
     }
}

//排序函数，iCol表示列索引，dataType表示该列的数据类型
function compareEle(iCol, dataType) {

    return function (oTR1, oTR2) {
         var vValue1 = convert(ieOrFireFox(oTR1.cells[iCol]), dataType);
         var vValue2 = convert(ieOrFireFox(oTR2.cells[iCol]), dataType);
         if (vValue1 < vValue2) {
             return -1;
         } else if (vValue1 > vValue2) {
             return 1;
         } else {
             return 0;
         }
        };
}

</script>

</head>

<body>
<form name="f1" id="f1" action="" method="post">
<table border="1" id="tblSort" sortCol="-1">
<thead>
<tr>
<th onclick="sortTable('tblSort',0)" style="cursor:pointer">Last Name</th>
<th onclick="sortTable('tblSort',1)" style="cursor:pointer">First Name</th>
<th onclick="sortTable('tblSort',2,'date')" style="cursor:pointer">Birthday</th>
<th onclick="sortTable('tblSort',3,'int')" style="cursor:pointer">Silbings</th>
</tr>
</thead>
<tbody>
<tr>
<td>Simth</td>
<td>John</td>
<td>7/12/1978</td>
<td>2</td>
</tr>
<tr>
<td>Johnson</td>
<td>Betty</td>
<td>5/12/1965</td>
<td>5</td>
</tr>
<tr>
<td>Henderson</td>
<td>Nathan</td>
<td>10/15/1977</td>
<td>3</td>
</tr>
<tr>
<td>Willianms</td>
<td>James</td>
<td>2/25/1949</td>
<td>1</td>
</tr>
<tr>
<td>Gilliam</td>
<td>Michael</td>
<td>7/8/1980</td>
<td>4</td>
</tr>
<tr>
<td>Walker</td>
<td>Matthew</td>
<td>6/18/1981</td>
<td>3</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>