佳伟's profile在圣殿门下PhotosBlogListsMore Tools Help

Blog


    18 May

    WEB简单表格排序

    做了个简单的表格,点击表头能实现升序、降序功能。

    <html>
      <head>
       <title>Sample</title>
      </head>
      <body>
       <table border="1" id="tblSort">
       <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">Siblings</th>
         
        </tr>
       </thead>
       <tbody>
        <tr>
         <td>Smith</td>
         <td>Betty</td>
         <td>7/12/1978</td>
         <td>2</td>
        </tr>
        <tr>
         <td>Johnson</td>
         <td>Nathan</td>
         <td>7/6/1988</td>
         <td>12</td>
        </tr>
        <tr>
         <td>Henderson</td>
         <td>James</td>
         <td>6/11/1973</td>
         <td>5</td>
        </tr>
       </tbody>
      </table>
      </body>
    </html>
    <script language="javascript" type="text/javascript">
      function sortTable(sTableID, iCol, sDataType) {
          var oTable = document.getElementById(sTableID);
          var oTBody = oTable.tBodies[0];//获得tbody对象
          var colDataRows = oTBody.rows;//获得行对象数组
          var aTRs = new Array;
         
          for (var i = 0; i < colDataRows.length; i++) {
              aTRs[i] = colDataRows[i];
          }
          //调用Array的排序方法,使用js中的排序function进行排序
          if (oTable.sortCol == iCol) {
              aTRs.reverse();
          } else {
              aTRs.sort(generateCompareTRs(iCol, sDataType));
          }
         
         
          //aTRs.sort(generateCompareTRs(iCol));
          //创建文档碎片,并使用文档碎片对tr进行重现
          var oFragment = document.createDocumentFragment();
          for (var i = 0; i < aTRs.length; i++) {
              oFragment.appendChild(aTRs[i]);
          }
         
          oTBody.appendChild(oFragment);
          oTable.sortCol = iCol
      } 

      function generateCompareTRs(iCol, sDataType) {
          return function compareTRs(oTR1, oTR2) {
            
             //比较两个tr的同一列元素的大小
              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 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();           
          }
      }
    </script>

    04 May

    心态

        今天受了点刺激,当时很愤慨,有点激动!
        这个世界太浮躁,太功利,太世俗了!TMD钱钱钱,卖掉灵魂去换钱吧!
       
        再三提醒自己,保持好心态!一切靠自己的努力!!