javascript实现客户端表格数据的排序-Javascript-技术教程-asp编程网

<html>
<head>
    <title>javascript实现客户端表格数据的排序</title>
    <style type="text/css">
th{ cursor:pointer; color:#ffffff; background:#000066; height:20px; line-height:20px;border:#006699 1px solid;}
    table{font-size:12px; border-collapse:collapse;}
td{ border:#006699 1px solid; padding-left:30px; height:18px; line-height:18px;}
        .t1{text-decoration:underline;cursor:hand;}
    </style>
    <script type="text/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));
   default:
    return sValue.toString();
  }
}
function generateCompareTRs(iCol,sDataValue)
{
  return function compareTRs(oTR1,oTR2)
  {
   var sValue1=convert(oTR1.cells[iCol].firstChild.nodeValue,sDataValue);
   var sValue2=convert(oTR2.cells[iCol].firstChild.nodeValue,sDataValue);
   return sValue1.localeCompare(sValue2);
  }
}
function sortTable(sTable,iCol,sDataValue)
{
   var oTable=document.getElementById(sTable);
   var oTBody=oTable.tBodies[0];
   var colDataRows=oTBody.rows;
   var aTRs=new Array;

   for (i=0; i<colDataRows.length;i++)
   {
    aTRs[i]=colDataRows[i];
   }

   if(oTable.sortCol==iCol)
   {
    aTRs.reverse();
   }
   else
   {
    aTRs.sort(generateCompareTRs(iCol));
   }

   var oFragment = document.createDocumentFragment();

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

   oTBody.appendChild(oFragment);
   oTable.sortCol=iCol;
}

</script>
</head>
<body>
    <table id="a" width="400px" align="center">
        <thead>
            <tr>
                <th onClick="sortTable('a',0)">姓名</th>
                <th onClick="sortTable('a',1,'int')">体积</th>
                <th onClick="sortTable('a',2,'date')">发布时间</th>
                <th onClick="sortTable('a',3,'float')">数字</th>
            </tr>
        </thead>
        <tbody>
            <tr align="left">
                <td class="t1" onclick="window.open('http://www.aspprogram.cn');">asp编程网</td>
                <td>22</td>
                <td>1985-07-11</td>
              <td>1.69</td>
            </tr>
            <tr align="left">
                <td class="t1" onclick="window.open('http://www.baidu.com')">百度</td>
                <td>25</td>
                <td>1982-11-24</td>
              <td>1.60</td>
            </tr>
            <tr align="left">
                <td class="t1" onclick="window.open('http://www.google.cn')">google</td>
                <td>23</td>
                <td>1984-02-08</td>
                <td>1.33</td>
            </tr>
            <tr align="left">
                <td class="t1" onclick="window.open('http://www.sina.com.cn')">新浪</a></td>
                <td>27</td>
                <td>1980-11-02</td>
                <td>1.78</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

javascript实现客户端表格数据的排序

最新相关教程

热门教程

推荐教程