ClownsTableSorter 0.1

clownMedlem sedan juni 2000126 inlägg

Trådstart3 jan. 2002 22:52#1

Hej

vill bara publicera en ny funktion som kan sortera html tabeller på client sidan.
Sorterings algoritmen är bubble sort, och jag använder mig av DOM för att flytta runt TR i html tabellen.

Kom gärna med förslag på förändringar i denna diskussions tråd.

Här kommer scriptet på en exempel sida, bara att copy-paste:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript1.2">
//***********************************
//*Made by Jonas Florin 2002-01-03
//***********************************
function Sort(idTable,sortingColoumnNumber)
{
returnvalue = bubbleSortDOMTable("SortTable", sortingColoumnNumber , 1);
}

function bubbleSortDOMTable(idTable, sortingColoumnNumber , start) {
	mtable=document.getElementById(idTable);
	mytable=mtable.getElementsByTagName("tbody").item(0);
	rest = mytable.getElementsByTagName("tr").length-1; //Antal TR
	for (var i = rest - 1; i >= start;  i--) {
		for (var j = start; j <= i; j++) {
			if (mytable.getElementsByTagName("tr").item(j+1).getElementsByTagName("td").item(sortingColoumnNumber).childNodes.item(0).data < mytable.getElementsByTagName("tr").item(j).getElementsByTagName("td").item(sortingColoumnNumber).childNodes.item(0).data) {
 			 refDel=mytable.getElementsByTagName("tr").item(j+1);
			 mytable.insertBefore(mytable.getElementsByTagName("tr").item(j+1), mytable.getElementsByTagName("tr").item(j));
		     }
		 }
	}
	return true;
}

</script>
</head>

<body bgcolor="#FFFFFF">
<table id="SortTable" width="610" border="0" cellspacing="0" cellpadding="0">
  <tr> 
    <th>id <a href="javascript://" onclick="javascript:Sort('SortTable',0);">sort</a></th>
    <th>firstname <a href="javascript://" onclick="javascript:Sort('SortTable',1);">sort</a></th>
    <th>surname <a href="javascript://" onclick="javascript:Sort('SortTable',2);">sort</a></th>
    <th>age <a href="javascript://" onclick="javascript:Sort('SortTable',3);">sort</a></th>
  </tr>
  <tr> 
    <td>0</td>
    <td>Sabine</td>
    <td>Karlsson</td>
    <td>30</td>
  </tr>
  <tr> 
    <td>1</td>
    <td>Jonas</td>
    <td>Florin</td>
    <td>26</td>
  </tr>
  <tr> 
    <td>2</td>
    <td>Hanna</td>
    <td>Florin</td>
    <td>27</td>
  </tr>
  <tr> 
    <td>3</td>
    <td>Niklas</td>
    <td>Svensson</td>
    <td>22</td>
  </tr>
  <tr> 
    <td>4</td>
    <td>Magnus</td>
    <td>Person</td>
    <td>30</td>
  </tr>
  <tr> 
    <td>5</td>
    <td>Martina</td>
    <td>Johansson</td>
    <td>23</td>
  </tr>
  <tr> 
    <td>6</td>
    <td>Lovisa</td>
    <td>Öhrn</td>
    <td>29</td>
  </tr>
</table>

<p> </p>
</body>
</html>

Lycka till!