View Single Post
  #1 (permalink)  
Old April 27th, 2005, 12:05 PM
m3chyck m3chyck is offline
Registered User
 
Join Date: Apr 2005
Location: , , .
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to m3chyck Send a message via Yahoo to m3chyck
Default Need help with javascript table sorter!

Hello everyone, I've never used one of these forums in my life so we'll see if anyone responds. I'm just starting webdesign, I know html and I'm slowly picking up javascript (will be getting a book soon for sure). Anyway I'm trying to create a table sorter that will basically look like this one: http://www.bluenile.com/diamond_search.asp?track=dsb

Infact, it will have near the same criteria. (shape, carat, clarity, color, certificate (whether or not there is one), price, and item number). I don't have much so far.. all I have is this that I've taken from another site that allows u to take the code:

Try not to laugh too hard.. ::beginner learning on own::

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>


<HEAD>

<SCRIPT LANGUAGE="JavaScript">


function setDataType(cValue)
  {

    var isDate = new Date(cValue);
    if (isDate == "NaN")
      {
        if (isNaN(cValue))
          {

            cValue = cValue.toUpperCase();
            return cValue;
          }
        else
          {

            var myNum;
            myNum = String.fromCharCode(48 + cValue.length) + cValue;
            return myNum;
          }
        }
  else
      {
           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;
       for (i=1; i < tableToSort.rows.length; i++)
      {
        colArray[i - 1] = setDataType(tableToSort.cells(iCurCell).innerText) ;
        iCurCell = iCurCell + tableToSort.cols;
      }

    for (i=0; i < colArray.length; i++)
      {
        bArray[i] = colArray[i];
      }

    colArray.sort();

    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>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></HEAD>



<BODY bgcolor="#6E5C34" text="#6E5C34">

<TABLE WIDTH="536" BORDER=1 align="center" CELLPADDING=1 CELLSPACING=0 bordercolor="#F3E0B6" cols=5 bgcolor="#FFFFFF" id=rsTable name="rsTable">
    <TR bgcolor=#F3E0B6>
      <TD width="71" bgcolor="#F3E0B6"><div align="center"><A href="javascript:sortTable(0, rsTable);">Shape</A></div></TD>
      <TD width="55" bgcolor="#F3E0B6"><div align="center"><A href="javascript:sortTable(1, rsTable);">Carat(s)</A></div></TD>
      <TD width="44" bgcolor="#F3E0B6"><div align="center"><A href="javascript:sortTable(2, rsTable);">Color</A></div></TD>
      <TD width="71" bgcolor="#F3E0B6"><div align="center"><A href="javascript:sortTable(3, rsTable);">Clarity</A></div></TD>
      <TD width="71" bgcolor="#F3E0B6"><div align="center"><A href="javascript:sortTable(4, rsTable);">Certificate</A></div></TD>
      <TD width="104" bgcolor="#F3E0B6"><div align="center"><A href="javascript:sortTable(5, rsTable);">Price</A></div></TD>
      <TD width="90" bgcolor="#F3E0B6"><div align="center"><A href="javascript:sortTable(6, rsTable);">Item #</A></div></TD>
    </TR><TR>
      <TD bgcolor="#FFFFFF"><div align="center">Round</div></TD>
      <TD bgcolor="#FFFFFF"><div align="center">.49</div></TD>
      <TD bgcolor="#FFFFFF"><div align="center">H</div></TD>
      <TD><div align="center">SI1</div></TD>
      <TD><div align="center">GIA</div></TD>
      <TD><div align="center">$1,550.00</div></TD>
      <TD><div align="center">51-00591</div></TD>
    </TR>
    <TR>
        <TD><div align="center">Round</div></TD>
        <TD><div align="center">.50</div></TD>
        <TD><div align="center">G</div></TD>
        <TD><div align="center">SI1</div></TD>
        <TD><div align="center">-</div></TD>
        <TD><div align="center">$1,975.00</div></TD>
        <TD><div align="center">01-00101</div></TD>
    </TR>
    <TR>
        <TD><div align="center">Round</div></TD>
        <TD><div align="center">.50</div></TD>
        <TD><div align="center">G</div></TD>
        <TD><div align="center">VS2</div></TD>
        <TD><div align="center">-</div></TD>
        <TD><div align="center">$3,650.00</div></TD>
        <TD><div align="center">01-00287</div></TD>
    </TR>
    <TR>
  <blue>and so on with the tables</blue>

<p><center>
Free JavaScripts provided<br>
</center>
<p>

</BODY>
</HTML>


I know i'm missing quite a lot, could anyone guide me in the right direction? It really would be greatly appreciated, thank you for reading my post.

-Bridget


Reply With Quote