对多列表格进行排序,并对不同数据进行排序

最新推荐文章于 2019-10-05 08:56:58 发布

转载最新推荐文章于 2019-10-05 08:56:58 发布 · 1k 阅读

文章标签：

#function #date #javascript #border #float #table

Web 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的表格排序功能，可以根据不同的数据类型（整数、浮点数、日期）进行升序排列。通过简单的点击TH元素即可实现相应列的排序。

JavaScript代码如下:

function convert(sValue, sDataType)
{
switch(sDataType)
{
case "int":
return parseInt(sValue);
case "float":
return parseFloat(sValue);
case "date":
return new Date(Date.parse(sValue));
defaule:
return sValue.toString();
}
}

function generateCompareTRs(iCol, sDataType)
{
    return function compareTRs(oTR1, oTR2) {
        var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
        var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);
        if(vValue1 < vValue2)
            return -1;
        else if(vValue1 > vValue2)
            return 1;
        else
            return 0;
    };
}

function sortTable(sTableID, iCol, sDataType)
{
    var oTable = document.getElementById(sTableID);
    var oTBody = oTable.tBodies[0];
    var colDataRows = oTBody.rows;
    var aTRs = new Array;
    for(var i = 0; i < colDataRows.length; i++)
        aTRs[i] = colDataRows[i];
    aTRs.sort(generateCompareTRs(iCol, sDataType));
    var oFragment = document.createDocumentFragment();
    for(var i = 0; i < aTRs.length; i++)
        oFragment.appendChild(aTRs[i]);
    oTBody.appendChild(oFragment);
    oTBody.sortCol = iCol;
}

举例
<table border="1" id="talsort">
<thead>
    <tr>
      <th onclick="sortTable('tblsort', 0)">Name</th>
      <th onclick="sortTable('tblsort', 1, 'date')">Birthday</th>
      <th onclick="sortTable('tblsort', 2, 'int')">Siblings</th>
    </tr>
</thead>
<tbody>
    <tr>
      <td>smith</td>
      <td>7/12/1978</td>
      <td>2</td>
    </tr>
    <tr>
      <td>white</td>
      <td>5/9/1973</td>
      <td>4</td>
    </tr>
</tbody>
</table>