Indlæs andet indhold på denne side:
I gamle dage - før css - var det almindeligt at bruge tabeller til at styre hjemmesidens indhold. Men i dag må tabellen siges kun at være beregnet til 'tabulære data', dvs. oplysninger, som det også på et stykke papir vil være naturligt at ordne i et skema.
Det kan i den forbindelse undertiden være en fordel, rundt omkring i tabellen at sammenlægge enkelte celler på tværs eller langs - det vender vi tilbage til om lidt, først skal vi have den simple tabel oprettet.
Siden er opdateret 11. 12. 2005
I en tabel som denne er nogle måske interesseret i at få de ansatte vist i den rækkefølge, de er blevet ansat. Andre vil måske hellere se dem sorteret i alfabetisk orden - eller efter deres medarbejdernummer eller størrelsen på deres optjente bonus.
Navn | Optjent bonus | Arb.nr. | Ansat |
---|---|---|---|
Sørensen, Jens | 012000 | 1353 | 18/08/2003 |
Olsen, Kurt | 191200 | 2342 | 02/05/1979 |
Jensen, Mogens | 032010 | 2755 | 09/08/1998 |
Slot, Søren | 122000 | 3211 | 12/11/1961 |
Skov, Peter | 009000 | 9005 | 01/01/2002 |
Hansen, Fritz | 003300 | 5554 | 22/05/1995 |
I tabellen herunder ser du de samme data. Og når siden hentes, er data sorteret på samme måde. Men hvis du klikker i et kolonnehoved, sorteres tabellens data efter denne kolonnes indhold. En pil viser sorteringsretningen. Et nyt klik på samme kolonnehoved vender retningen:
Navn | Optjent bonus | Arb.nr. | Ansat |
---|---|---|---|
Sørensen, Jens | 012000 | 1353 | 18/08/2003 |
Olsen, Kurt | 191200 | 2342 | 02/05/1979 |
Jensen, Mogens | 032010 | 2755 | 09/08/1998 |
Slot, Søren | 122000 | 3211 | 12/11/1961 |
Skov, Peter | 009000 | 9005 | 01/01/2002 |
Hansen, Fritz | 003300 | 5554 | 22/05/1995 |
For at det kan lade sig gøre at lave en sådan sorterbar tabel, skal du følge disse tre anvisninger:
<script type="text/javascript" src="sorttable.js"></script>
<table class="sortable">
<table class="sortable" id="t1">
Herefter er din side sådan set klar til at man kan sortere data i tabellen. Men for at pynte lidt på tabellen, kan du indsætte dette stylesheet i sidens <head>:
<style type="text/css">
table.sortable th {
color:#000;
background-color:#ccf;
border:1px xolid #ddd;
}
table.sortable a.sortheader {
color:#000;
background-color:inherit;
font-weight: bold;
text-decoration: none;
display: block;
padding:0;
}
table.sortable span.sortarrow {
color: #000;
background-color:inherit;
text-decoration: none;
}
</style>
Her ser du så scriptet, der laver arbejdet. I stedet for at kopiere scriptet fra kodeboksen kan du hente scriptet alene ind i browseren. Marker derfra hele scriptet og kopier det over til din sædvanlige editor, hvor du gemmer det som sorttable.js:
addEvent(window, "load", sortables_init);
var SORT_COLUMN_INDEX;
function sortables_init() {
// Find alle tabeller med class="sortable" og gør dem sorterbare
if (!document.getElementsByTagName) return;
tbls = document.getElementsByTagName("table");
for (ti=0;ti<tbls.length;ti++) {
thisTbl = tbls[ti];
if (((' '+thisTbl.className+' ').indexOf("sortable") != -1) && (thisTbl.id)) {
//initTable(thisTbl.id);
ts_makeSortable(thisTbl);
}
}
}
function ts_makeSortable(table) {
if (table.rows && table.rows.length > 0) {
var firstRow = table.rows[0];
}
if (!firstRow) return;
// Vi går ud fra, at første række er tabelhovedet og gør indholdet til klikbare links
for (var i=0;i<firstRow.cells.length;i++) {
var cell = firstRow.cells[i];
var txt = ts_getInnerText(cell);
cell.innerHTML = '<a href="#" class="sortheader" onclick="ts_resortTable(this);return false;">'+txt+'<span class="sortarrow"> </span></a>';
}
}
function ts_getInnerText(el) {
if (typeof el == "string") return el;
if (typeof el == "undefined") { return el };
if (el.innerText) return el.innerText; // Ikke nødvendig, men gør det hurtigere
var str = "";
var cs = el.childNodes;
var l = cs.length;
for (var i = 0; i < l; i++) {
switch (cs[i].nodeType) {
case 1: //ELEMENT_NODE
str += ts_getInnerText(cs[i]);
break;
case 3: //TEXT_NODE
str += cs[i].nodeValue;
break;
}
}
return str;
}
function ts_resortTable(lnk) {
// find span-elementet
var span;
for (var ci=0;ci<lnk.childNodes.length;ci++) {
if (lnk.childNodes[ci].tagName && lnk.childNodes[ci].tagName.toLowerCase() == 'span') span = lnk.childNodes[ci];
}
var spantext = ts_getInnerText(span);
var td = lnk.parentNode;
var column = td.cellIndex;
var table = getParent(td,'TABLE');
// Sæt en type for kolonnen
if (table.rows.length <= 1) return;
var itm = ts_getInnerText(table.rows[1].cells[column]);
sortfn = ts_sort_caseinsensitive;
if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d\d\d$/)) sortfn = ts_sort_date;
if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d$/)) sortfn = ts_sort_date;
if (itm.match(/^[£$]/)) sortfn = ts_sort_currency;
if (itm.match(/^[\d\.]+$/)) sortfn = ts_sort_numeric;
SORT_COLUMN_INDEX = column;
var firstRow = new Array();
var newRows = new Array();
for (i=0;i<table.rows[0].length;i++) { firstRow[i] = table.rows[0][i]; }
for (j=1;j<table.rows.length;j++) { newRows[j-1] = table.rows[j]; }
newRows.sort(sortfn);
if (span.getAttribute("sortdir") == 'down') {
ARROW = ' <strong>↑</strong>'; // Pil op - indsæt evt. en lille gif
newRows.reverse();
span.setAttribute('sortdir','up');
} else {
ARROW = ' <strong>↓</strong>'; // Pil ned - indsæt evt. en lille gif
span.setAttribute('sortdir','down');
}
// Vi laver appendChild på rækker, som allerede eksisterer i tbody, så de flyttes i stedet for at lave nye rækker
// don't do sortbottom rows
for (i=0;i<newRows.length;i++) { if (!newRows[i].className || (newRows[i].className && (newRows[i].className.indexOf('sortbottom') == -1))) table.tBodies[0].appendChild(newRows[i]);}
// do sortbottom rows only
for (i=0;i<newRows.length;i++) { if (newRows[i].className && (newRows[i].className.indexOf('sortbottom') != -1)) table.tBodies[0].appendChild(newRows[i]);}
// Slet eventuelle andre pile
var allspans = document.getElementsByTagName("span");
for (var ci=0;ci<allspans.length;ci++) {
if (allspans[ci].className == 'sortarrow') {
if (getParent(allspans[ci],"table") == getParent(lnk,"table")) { // i den samme tabel?
allspans[ci].innerHTML = ' ';
}
}
}
span.innerHTML = ARROW;
}
function getParent(el, pTagName) {
if (el == null) return null;
else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) // Gecko bug, burde være uppercase
return el;
else
return getParent(el.parentNode, pTagName);
}
function ts_sort_date(a,b) {
// y2k note: tocifrede tal mindre end 50 betragtes som 20XX, tocifrede større end 50 betragtes som 19XX
aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
if (aa.length == 10) {
dt1 = aa.substr(6,4)+aa.substr(3,2)+aa.substr(0,2);
} else {
yr = aa.substr(6,2);
if (parseInt(yr) < 50) { yr = '20'+yr; } else { yr = '19'+yr; }
dt1 = yr+aa.substr(3,2)+aa.substr(0,2);
}
if (bb.length == 10) {
dt2 = bb.substr(6,4)+bb.substr(3,2)+bb.substr(0,2);
} else {
yr = bb.substr(6,2);
if (parseInt(yr) < 50) { yr = '20'+yr; } else { yr = '19'+yr; }
dt2 = yr+bb.substr(3,2)+bb.substr(0,2);
}
if (dt1==dt2) return 0;
if (dt1<dt2) return -1;
return 1;
}
function ts_sort_currency(a,b) {
aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,'');
bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,'');
return parseFloat(aa) - parseFloat(bb);
}
function ts_sort_numeric(a,b) {
aa = parseFloat(ts_getInnerText(a.cells[SORT_COLUMN_INDEX]));
if (isNaN(aa)) aa = 0;
bb = parseFloat(ts_getInnerText(b.cells[SORT_COLUMN_INDEX]));
if (isNaN(bb)) bb = 0;
return aa-bb;
}
function ts_sort_caseinsensitive(a,b) {
aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).toLowerCase();
bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).toLowerCase();
if (aa==bb) return 0;
if (aa<bb) return -1;
return 1;
}
function ts_sort_default(a,b) {
aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
if (aa==bb) return 0;
if (aa<bb) return -1;
return 1;
}
function addEvent(elm, evType, fn, useCapture)
// addEvent og removeEvent
// cross-browser event-håndtering for IE5+, NS6 og Mozilla
{
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent){
var r = elm.attachEvent("on"+evType, fn);
return r;
} else {
alert("Handler kunne ikke fjernes");
}
}