topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

professional-javascript-12-TableSortExample3.htm / htm



  <html>
      <head>
          <title>Table Sort Example</title>
          <script type="text/javascript">
          
              function generateCompareTRs(iCol) {
          
                  return  function compareTRs(oTR1, oTR2) {
                              var sValue1 = oTR1.cells[iCol].firstChild.nodeValue;
                              var sValue2 = oTR2.cells[iCol].firstChild.nodeValue;
          
                              return sValue1.localeCompare(sValue2);
                          };
              }
             
              function sortTable(sTableID, iCol) {
                  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];
                  }
          
                  if (oTable.sortCol == iCol) {
                      aTRs.reverse();
                  } else {
                      aTRs.sort(generateCompareTRs(iCol));
                  }
          
                  var oFragment = document.createDocumentFragment();
                  for (var i=0; i < aTRs.length; i++) {
                      oFragment.appendChild(aTRs[i]);
                  }
         
                  oTBody.appendChild(oFragment);
                  oTable.sortCol = iCol;
              }
  
      
          </script>
      </head>
  
      <body>
          <p>Click on the table header to sort in ascending order.</p>
          <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>
                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <td>Smith</td>
                      <td>John</td>
                  </tr>
                  <tr>
                      <td>Johnson</td>
                      <td>Betty</td>
                  </tr>
                  <tr>
                      <td>Henderson</td>
                      <td>Nathan</td>
                  </tr>
                  <tr>
                      <td>Williams</td>
                      <td>James</td>
                  </tr>
                  <tr>
                      <td>Gilliam</td>
                      <td>Michael</td>
                  </tr>
                  <tr>
                      <td>Walker</td>
                      <td>Matthew</td>
                  </tr>
              </tbody>
          </table>        
      </body>
  </html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.