Lars Olesen <lsolesen@hotmail.com> writes:
> Fandt et smart eksempel på, hvordan man kan sortere en tabel med
> javascript, så man ikke behøver at besvære serveren flere gange. Det
> benytter sig imidlertid af innerHTML - men er der ikke noget med, at
> det ikke rigtig bygger på DOM'en:
Jo, det er en Microsoft-opfindelse, og er ikke med i nogen W3C-
anbefaling. En bedre måde er at sortere rækkerne med DOM. Man skal,
som altid, undgå at have celler der strækker sig over mere end
en række, ellers bliver sortering noget rod.
---
/* table: reference til et table-element
* comp : funktion der sammenligner tabel-rækker
*/
function sortTable(table,comp) {
var rowArray = [];
var tbody = null;
for(var i=0;i<table.rows.length;i++) { // find rækker i en tbody
if (table.rows[i].parentNode.tagName.match(/^tbody$/i)) {
tbody = table.rows[i].parentNode;
rowArray.push(table.rows[i]);
}
}
rowArray.sort(comp);
for (i=0;i<rowArray.length;i++) {
tbody.appendChild(rowArray[i]);
}
}
---
Eksempel (husk at inkludere sortTable-funktionen):
---
<script type="text/javascript">
// generisk sammenligningsfunktion til sort
function cmp(a,b) {return (a>b)-(b>a);}
//funktioner der sammenligner celler i en række
function cmpCol1(a,b) {
return cmp(a.cells[0].firstChild.nodeValue,
b.cells[0].firstChild.nodeValue);
}
function cmpCol1rev(a,b) {
return cmp(b.cells[0].firstChild.nodeValue,
a.cells[0].firstChild.nodeValue);
}
function cmpCol2(a,b) {
return cmp(a.cells[1].firstChild.nodeValue,
b.cells[1].firstChild.nodeValue);
}
function cmpCol2rev(a,b) {
return cmp(b.cells[1].firstChild.nodeValue,
a.cells[1].firstChild.nodeValue);
}
</script>
<table>
<thead style="font-weight:bold">
<tr>
<td onclick="sortTable(this.parentNode.parentNode.parentNode,cmpCol1);">
Bogstav
</td>
<td onclick="sortTable(this.parentNode.parentNode.parentNode,cmpCol2);">
Tal
</td></tr>
</thead>
<tr><td>X</td><td>2</td></tr>
<tr><td>Y</td><td>1</td></tr>
<tr><td>Z</td><td>3</td></tr>
<tr><td>A</td><td>4</td></tr>
<tfoot style="font-weight:bold">
<tr>
<td onclick="sortTable(this.parentNode.parentNode.parentNode,cmpCol1rev);">
Bogstav
</td>
<td onclick="sortTable(this.parentNode.parentNode.parentNode,cmpCol2rev);">
Tal
</td></tr>
</tfoot>
</table>
---
Tryk på header eller footer for at sortere.
Held og lykke
/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:
http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'