webForumDet fria alternativet

ClownsTableSorter 0.1

JavaScriptur Script - JavaScript, DHTML

0 svar · 1 627 visningar · startad av clown

Medlem sedan juni 2000126 inlägg
Frågan#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!

------------------
Jonas Florin
-Din gycklare i vardagen-

133 ms totalt · 3 externa anrop · v20260731065814-full.25f56b17
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
131 ms — hämta tråd, inlägg och bilagor (db)