Avatar billede Mik2000 Professor
21. februar 2011 - 00:27 Der er 3 kommentarer og
2 løsninger

Skift farve i celler

Hej

Jeg har en tabel som denne:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50" align="left" valign="middle" class="navn" >&nbsp;</td>
<td height="30" align="left" valign="middle" class="navn" >&nbsp;</td>
<td width="30" align="center" valign="middle" class="navn" >&nbsp;</td>
</tr>
<tr>
<td width="50" align="left" valign="middle" class="navn" >&nbsp;</td>
<td height="30" align="left" valign="middle" class="navn" >&nbsp;</td>
<td width="30" align="center" valign="middle" class="navn" >&nbsp;</td>
</tr>
</table>


Findes der nogen måde at få alle celler i en række til at skifte farve når man kører musen henover?

Helst en måde så man kan bruge det samme på en tabel med flere eller færre kollonner/rækker, og helst en der er holdbar så den ikke forsvinder i f.eks. html 5

På forhånd tak :)
Avatar billede BufferUnderrun Nybegynder
21. februar 2011 - 09:08 #1
Dette kan du gøre i StyleSheets. Du skal bare skrive dette i din CSS-fil:

table tr:hover { background-color: Blue }

Alternativt kan du bruge (kan ikke helt huske om det første kun virker i nogen browsere):

table td:hover { background-color: Blue }

Hvis du ikke bruger en seperat CSS-fil kan du skrive det direkte i din HTMl med:

<style type="text/css">
... indsæt ovenstående ...
</style>

Hvis du kun vil have farve på udvalgte tabeller kan du tilføje class="asdf" i dit <table> tag, og skrive følgende:

.asdf td:hover { background-color: Blue }
Avatar billede intenz Novice
21. februar 2011 - 09:14 #2
Eller i javascript. Det kunne se sådan ud:


<script>
window.onload = function() {
    trChangeColor('test', '#00FF00', '#FFF');
}

function trChangeColor(id, onColor, offColor) {
    var e = document.getElementById(id);
    var tr = e.getElementsByTagName('TR');
    for (var i=0; i<tr.length; i++) {
        tr[i].onmouseover = function() {
            this.style.backgroundColor = onColor
        }
        tr[i].onmouseout = function() {
            this.style.backgroundColor = offColor
        }
    }
}
</script>

<table width="100%" border="1" cellspacing="0" cellpadding="0" id="test">
<tr>
<td width="50" align="left" valign="middle" class="navn" >&nbsp;</td>
<td height="30" align="left" valign="middle" class="navn" >&nbsp;</td>
<td width="30" align="center" valign="middle" class="navn" >&nbsp;</td>
</tr>
<tr>
<td width="50" align="left" valign="middle" class="navn" >&nbsp;</td>
<td height="30" align="left" valign="middle" class="navn" >&nbsp;</td>
<td width="30" align="center" valign="middle" class="navn" >&nbsp;</td>
</tr>
</table>


Funktionen kaldes med:
trChangeColor('test', '#00FF00', '#FFF');

Hvor 'test' er tabellens ID, den første farve er 'onmouseover', den sidste 'onmouseout'.

CSS løsningen som #1 foreslår er dog mere simpel.
Avatar billede Mik2000 Professor
21. februar 2011 - 11:25 #3
Hej

Mange tak for jeres svar. Brugte løsning 1 - ganske simpelt når man bare vidste det lol

Hvis du også smider et svar intenz så får du lidt af pointene også
Avatar billede intenz Novice
21. februar 2011 - 11:31 #4
Okay :)
Avatar billede Mik2000 Professor
21. februar 2011 - 11:36 #5
Tak for hjælpen :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester