lars09 wrote in dk.edb.internet.webdesign.clientside:
> Hvordan fremstiller man en såkaldt bubblesort i JavaScript !! Er det
> overhovedet muligt ??
> --
> Leveret af:
>
http://www.kandu.dk/
> "Vejen til en hurtig løsning"
>
Ja og hvis du nu vil have sortering af en hel tabel,
så har jeg fundet flg ude i samfundet, der virker ret fix...:
der er en HTML-del og et javascript.js, altså 2 filer
her er html-delen:
-----------------
<html>
<head><script LANGUAGE="JavaScript" src="sortering.js"></script>
<title></title>
</head>
<body>
<table WIDTH="75%" BORDER="1" CELLSPACING="1" CELLPADDING="1"
name="rsTable" id="rsTable"
cols="5">
<tr bgcolor="mediumblue">
<td bgcolor="#00FFFF"><big><font color="white" face="Verdana"><a
href="javascript:sortTable(0, rsTable);">ID</a></font></big></td>
<td bgcolor="#00FFFF"><big><font color="white" face="Verdana"><a
href="javascript:sortTable(1, rsTable);">NAME</a></font></big></td>
<td bgcolor="#00FFFF"><big><font color="white" face="Verdana"><a
href="javascript:sortTable(2, rsTable);">DATE</a></font></big></td>
<td bgcolor="#00FFFF"><big><font color="white" face="Verdana"><a
href="javascript:sortTable(3,
rsTable);">PHONE</a></font></big></td>
<td bgcolor="#00FFFF"><big><font color="white" face="Verdana"><a
href="javascript:sortTable(4,
rsTable);">WORKFLOW</a></font></big></td>
</tr>
<tr>
<td><big><font face="Verdana">1</font></big></td>
<td><big><font face="Verdana">Andy Berry</font></big></td>
<td><big><font face="Verdana">4/9/72</font></big></td>
<td><big><font face="Verdana">763-555-1212</font></big></td>
<td><big><font face="Verdana">REVIEW</font></big></td>
</tr>
<tr>
<td><big><font face="Verdana">2</font></big></td>
<td><big><font face="Verdana">Dan Developer</font></big></td>
<td><big><font face="Verdana">9/3/63</font></big></td>
<td><big><font face="Verdana">215-555-1400</font></big></td>
<td><big><font face="Verdana">SAME</font></big></td>
</tr>
<tr>
<td><big><font face="Verdana">3</font></big></td>
<td><big><font face="Verdana">John Javascript</font></big></td>
<td><big><font face="Verdana">3/4/71</font></big></td>
<td><big><font face="Verdana">612-555-0987</font></big></td>
<td><big><font face="Verdana">REVIEW</font></big></td>
</tr>
<tr>
<td><big><font face="Verdana">4</font></big></td>
<td><big><font face="Verdana">Jerry JSPage</font></big></td>
<td><big><font face="Verdana">8/2/71</font></big></td>
<td><big><font face="Verdana">215-555-7654</font></big></td>
<td><big><font face="Verdana">SAME</font></big></td>
</tr>
<tr>
<td><big><font face="Verdana">5</font></big></td>
<td><big><font face="Verdana">Mary Mainframe</font></big></td>
<td><big><font face="Verdana">3/28/70</font></big></td>
<td><big><font face="Verdana">763-555-8295</font></big></td>
<td><big><font face="Verdana">REVIEW</font></big></td>
</tr>
<tr>
<td><big><font face="Verdana">6</font></big></td>
<td><big><font face="Verdana">Elaine Ecommerce</font></big></td>
<td><big><font face="Verdana">2/28/29</font></big></td>
<td><big><font face="Verdana">612-555-1338</font></big></td>
<td><big><font face="Verdana">REVIEW</font></big></td>
</tr>
<tr>
<td><big><font face="Verdana">7</font></big></td>
<td><big><font face="Verdana">John Smith</font></big></td>
<td><big><font face="Verdana">12/31/00</font></big></td>
<td><big><font face="Verdana">610-555-0987</font></big></td>
<td><big><font face="Verdana">SAME</font></big></td>
</tr>
<tr>
<td><big><font face="Verdana">8</font></big></td>
<td><big><font face="Verdana">Candy Coder</font></big></td>
<td><big><font face="Verdana">4/1/70</font></big></td>
<td><big><font face="Verdana">000-555-9099</font></big></td>
<td><big><font face="Verdana">SAME</font></big></td>
</tr>
<tr>
<td><big><font face="Verdana">9</font></big></td>
<td><big><font face="Verdana">Pippy Long Stocking</font></big></td>
<td><big><font face="Verdana">1/1/30</font></big></td>
<td><big><font face="Verdana">613-555-1338</font></big></td>
<td><big><font face="Verdana">DIFFERENT</font></big></td>
</tr>
<tr>
<td><big><font face="Verdana">10</font></big></td>
<td><big><font face="Verdana">111222</font></big></td>
<td><big><font face="Verdana">2/2/01</font></big></td>
<td><big><font face="Verdana">345-555-7654</font></big></td>
<td><big><font face="Verdana">DIFFERENT</font></big></td>
</tr>
<tr>
<td><big><font face="Verdana">11</font></big></td>
<td><big><font face="Verdana">Apple Man</font></big></td>
<td><big><font face="Verdana">3/13/74</font></big></td>
<td><big><font face="Verdana">215-555-4043</font></big></td>
<td><big><font face="Verdana">DIFFERENT</font></big></td>
</tr>
<tr>
<td><big><font face="Verdana">12</font></big></td>
<td><big><font face="Verdana">Henning</font></big></td>
<td><big><font face="Verdana">6/20/56</font></big></td>
<td><big><font face="Verdana">212-418-1234</font></big></td>
<td><big><font face="Verdana">AND</font></big></td>
</tr>
</table>
</body>
</html>
-----------------------------------------------
og her er java delen, der skal kaldes
sortering.js
-------------------------------------------
<!-- 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 -->
-----------------------------
rigtig god fornøjelse i vinterferien...!
Cocktail,
...rystede posen og fandt noget i arkivet...!
--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP ???
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! =>
http://www.html.dk/tutorials