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 18. 3. 2009
Dette eksempel viser hvordan man med javascript kan manipulere rows og cells i tabeller.
Prøv at pege med musen rundt i den inderste tabel herunder:
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | |||||||||||||||||||||||||||||||||||||||||||||||||
1 |
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||
2 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
3 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
4 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
5 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
6 |
I html er der i tabellen bare sat et id (id="tbl") i starttagget. Resten klares med javascripts. Før tabellen indlæses et beskedent script:
function enableMo(id) {
var tbl = document.getElementById(id);
//gennemløb alle tabelrækker
for ( var c = 0; c < tbl.rows.length; c++ ) {
var cells = tbl.rows[c].cells;
for ( var d = 0; d < cells.length; d++ ) {
cells[d].onmouseover = function() { mCell(this,tbl) };
}//for
}//for
}//slut på enableMo
function mCell(scell,tbl) {
var row = scell.parentNode.rowIndex;
var cell = scell.cellIndex;
for ( var c = 0; c < tbl.rows.length; c++ ) {
var cells = tbl.rows[c].cells;
for ( var d = 0; d < cells.length; d++ ) {
//de næste 4 linjer definerer linealfarverne
//først farven i krydset
if( c == row && d == cell ) cells[d].style.backgroundColor = "#ccccff";
//dernæst farverne i lodrette og vandrette linealer
else if ( c == row) cells[d].style.backgroundColor = "#eeeeff";
else if ( d == cell) cells[d].style.backgroundColor = "#eeeeff";
//endelig farven uden om linealerne
else cells[d].style.backgroundColor = "#ffffff";
}//for
}//for
}//slut på mCell
Scriptet ligger i en ekstern lineal.js-fil og kaldes med kommandoen:
<script type="text/javascript" src="lineal.js"></script>
Efter tabellen er indsat en ganske lille script:
<script type="text/javascript">
enableMo("tbl");
</script>