posts - 43,comments - 75,trackbacks - 0


<!-- TWO STEPS TO INSTALL SORT DATA TABLE:

  1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function setDataType(cValue)
  {
    // THIS FUNCTION CONVERTS DATES AND NUMBERS FOR PROPER ARRAY
    // SORTING WHEN IN THE SORT FUNCTION
    var isDate = new Date(cValue);
    if (isDate == "NaN")
      {
        if (isNaN(cValue))
          {
            // THE VALUE IS A STRING, MAKE ALL CHARACTERS IN
            // STRING UPPER CASE TO ASSURE PROPER A-Z SORT
            cValue = cValue.toUpperCase();
            return cValue;
          }
        else
          {
            // VALUE IS A NUMBER, TO PREVENT STRING SORTING OF A NUMBER
            // ADD AN ADDITIONAL DIGIT THAT IS THE + TO THE LENGTH OF
            // THE NUMBER WHEN IT IS A STRING
            var myNum;
            myNum = String.fromCharCode(48 + cValue.length) + cValue;
            return myNum;
          }
        }
  else
      {
        // VALUE TO SORT IS A DATE, REMOVE ALL OF THE PUNCTUATION AND
        // AND RETURN THE STRING NUMBER
        //BUG - STRING AND NOT NUMERICAL SORT .....
        // ( 1 - 10 - 11 - 2 - 3 - 4 - 41 - 5  etc.)
        var myDate = new String();
        myDate = isDate.getFullYear() + " " ;
        myDate = myDate + isDate.getMonth() + " ";
        myDate = myDate + isDate.getDate(); + " ";
        myDate = myDate + isDate.getHours(); + " ";
        myDate = myDate + isDate.getMinutes(); + " ";
        myDate = myDate + isDate.getSeconds();
        //myDate = String.fromCharCode(48 + myDate.length) + myDate;
        return myDate ;
      }
  }
function sortTable(col, tableToSort)
  {
    var iCurCell = col + tableToSort.cols;
    var totalRows = tableToSort.rows.length;
    var bSort = 0;
    var colArray = new Array();
    var oldIndex = new Array();
    var indexArray = new Array();
    var bArray = new Array();
    var newRow;
    var newCell;
    var i;
    var c;
    var j;
    // ** POPULATE THE ARRAY colArray WITH CONTENTS OF THE COLUMN SELECTED
    for (i=1; i < tableToSort.rows.length; i++)
      {
        colArray[i - 1] = setDataType(tableToSort.cells(iCurCell).innerText);
        iCurCell = iCurCell + tableToSort.cols;
      }
    // ** COPY ARRAY FOR COMPARISON AFTER SORT
    for (i=0; i < colArray.length; i++)
      {
        bArray[i] = colArray[i];
      }
    // ** SORT THE COLUMN ITEMS
    //alert ( colArray );
    colArray.sort();
    //alert ( colArray );
    for (i=0; i < colArray.length; i++)
      { // LOOP THROUGH THE NEW SORTED ARRAY
        indexArray[i] = (i+1);
        for(j=0; j < bArray.length; j++)
          { // LOOP THROUGH THE OLD ARRAY
            if (colArray[i] == bArray[j])
              {  // WHEN THE ITEM IN THE OLD AND NEW MATCH, PLACE THE
                // CURRENT ROW NUMBER IN THE PROPER POSITION IN THE
                // NEW ORDER ARRAY SO ROWS CAN BE MOVED ....
                // MAKE SURE CURRENT ROW NUMBER IS NOT ALREADY IN THE
                // NEW ORDER ARRAY
                for (c=0; c<i; c++)
                  {
                    if ( oldIndex[c] == (j+1) )
                    {
                      bSort = 1;
                    }
                      }
                      if (bSort == 0)
                        {
                          oldIndex[i] = (j+1);
                        }
                          bSort = 0;
                        }
          }
    }
  // ** SORTING COMPLETE, ADD NEW ROWS TO BASE OF TABLE ....
  for (i=0; i<oldIndex.length; i++)
    {
      newRow = tableToSort.insertRow();
      for (c=0; c<tableToSort.cols; c++)
        {
          newCell = newRow.insertCell();
          newCell.innerHTML = tableToSort.rows(oldIndex[i]).cells(c).innerHTML;
        }
      }
  //MOVE NEW ROWS TO TOP OF TABLE ....
  for (i=1; i<totalRows; i++)
    {
      tableToSort.moveRow((tableToSort.rows.length -1),1);
    }
  //DELETE THE OLD ROWS FROM THE BOTTOM OF THE TABLE ....
  for (i=1; i<totalRows; i++)
    {
      tableToSort.deleteRow();
    }
  }
//  End -->
</script>

</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->

<BODY>

<TABLE WIDTH="75%" BORDER=1 CELLSPACING=1 CELLPADDING=1 name="rsTable" id=rsTable  cols=5>
 <TR bgcolor=mediumblue>
  <TD><A href="javascript:sortTable(0, rsTable);"><FONT color=white><B>ID</FONT></B></A></TD>
  <TD><A href="javascript:sortTable(1, rsTable);"><FONT color=white><B>NAME</FONT></B></A></TD>
  <TD><A href="javascript:sortTable(2, rsTable);"><FONT color=white><B>DATE</FONT></B></A></TD>
  <TD><A href="javascript:sortTable(3, rsTable);"><FONT color=white><B>PHONE</FONT></B></A></TD>
  <TD><A href="javascript:sortTable(4, rsTable);"><FONT color=white><B>WORKFLOW</FONT></B></A></TD>
 </TR></FONT>
 <TR>
  <TD>1</TD>
  <TD>Andy Berry</TD>
  <TD>4/9/72</TD>
  <TD>763-555-1212</TD>
  <TD>REVIEW</TD>
 </TR>
 <TR>
  <TD>2</TD>
  <TD>Dan Developer</TD>
  <TD>9/3/63</TD>
  <TD>215-555-1400</TD>
  <TD>SAME</TD>
 </TR>
 <TR>
  <TD>3</TD>
  <TD>John Javascript</TD>
  <TD>3/4/71</TD>
  <TD>612-555-0987</TD>
  <TD>REVIEW</TD>
 </TR>
 <TR>
  <TD>4</TD>
  <TD>Jerry JSPage</TD>
  <TD>8/2/71</TD>
  <TD>215-555-7654</TD>
  <TD>SAME</TD>
 </TR>
 <TR>
  <TD>5</TD>
  <TD>Mary Mainframe</TD>
  <TD>3/28/70</TD>
  <TD>763-555-8295</TD>
  <TD>REVIEW</TD>
 </TR>
 <TR>
  <TD>6</TD>
  <TD>Elaine Ecommerce</TD>
  <TD>2/28/29</TD>
  <TD>612-555-1338</TD>
  <TD>REVIEW</TD>
 </TR>
 <TR>
  <TD>7</TD>
  <TD>John Smith</TD>
  <TD>12/31/00</TD>
  <TD>610-555-0987</TD>
  <TD>SAME</TD>
 </TR>
  <TR>
  <TD>8</TD>
  <TD>Candy Coder</TD>
  <TD>4/1/70</TD>
  <TD>000-555-9099</TD>
  <TD>SAME</TD>
 </TR>
  <TR>
  <TD>9</TD>
  <TD>Pippy Long Stocking</TD>
  <TD>1/1/30</TD>
  <TD>613-555-1338</TD>
  <TD>DIFFERENT</TD>
 </TR>
  <TR>
  <TD>10</TD>
  <TD>111222</TD>
  <TD>2/2/01</TD>
  <TD>345-555-7654</TD>
  <TD>DIFFERENT</TD>
 </TR>
  <TR>
  <TD>11</TD>
  <TD>Apple Man</TD>
  <TD>3/13/74</TD>
  <TD>215-555-4043</TD>
  <TD>DIFFERENT</TD>
 </TR>
</TABLE>


<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size:  7.51 KB -->

posted on 2006-08-09 17:35 梦源 阅读(1137) 评论(2)  编辑  收藏

FeedBack:
# re: javaScript对table进行排序
2007-05-23 15:06 | 试验者
有BUG而且在FireFox浏览器中不可用  回复  更多评论
  
# re: javaScript对table进行排序

只有注册用户登录后才能发表评论。


网站导航: