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
Need help with javascript table sorter!
