Avatar billede dotcom1 Nybegynder
09. januar 2006 - 12:08 Der er 7 kommentarer og
2 løsninger

tr hover script

Hej.

Jeg bruger følgende script til en hover-effekt (baggrundsfarven ændres ved mouseOver) på table rows i en tabel:

    <script type="text/javascript" language="javascript">
    function tabdataInit() {
    var tables = document.getElementsByTagName('table');
    for (var t=0; t<tables.length; t++) {
        if ('tabdata'==tables[t].className) {
        var rows = document.getElementsByTagName('tr');
            for (var i = 0; i < rows.length; i++) {
                rows[i].onmouseover = function() {
                    this.className += ' hilite';
                }
                rows[i].onmouseout = function() {
                    this.className = this.className.replace('hilite', '');
                }
            }
        }
    }
    }
    window.onload=tabdataInit;
    </script>

"tabdata" er tabellens klassenavn og "Hilite" giver hover-effekten på alle <tr>. Det virker fint, men jeg har imidlertid en tabel, hvor de sidste par <tr> ikke skal have hover-effekten - kan man på en eller anden måde give disse table rows en form for id, der ignorerer hover-effekten?

Mvh.
Avatar billede jokkejensen Novice
09. januar 2006 - 13:19 #1
før du binder onmouseover til TR rækkerne:

rows[i].onmouseover = function() {
this.className += ' hilite';
}

Ville det nok være passende ikke ex at tage de rækker med der har class="DontChange" eller noget lignende..

Bruger du ID skal de jo helst være forskellige, alternativt lad være med at tage de rækker med der overhovedet har et id.
Avatar billede jokkejensen Novice
09. januar 2006 - 13:28 #2
function tabdataInit() {
    var tables = document.getElementsByTagName('table');
    for (var t=0; t<tables.length; t++) {
        if ('tabdata'==tables[t].className) {
        var rows = document.getElementsByTagName('tr');
            for (var i = 0; i < rows.length; i++) {
               
if(rows[i].className != "dontTouch")
        {
        rows[i].onmouseover = function() {
                    this.className += 'hilite';
                }
                rows[i].onmouseout = function() {
                    this.className = this.className.replace('hilite', '');
                }
}
            }
        }
    }
    }
    window.onload=tabdataInit;

Sådan eventuelt..

Der er sikkert bedre måde er gøre det på, er ikke helt inde i javascript - men det virker :)
Avatar billede jokkejensen Novice
09. januar 2006 - 13:28 #3
how.. det var et svar
Avatar billede dotcom1 Nybegynder
09. januar 2006 - 14:48 #4
Skal de table rows, der ikke skal highlightes så have class'en dontTouch?
Avatar billede roenving Novice
10. januar 2006 - 03:24 #5
-- men undlad at bruge klassebytte, brug i stedet en udskiftning af den konkrete css-property:

                rows[i].onmouseover = function() {
                    this.style.backgroundColor = "red";
                }
                rows[i].onmouseout = function() {
                    this.style.backgroundColor = "";
                }
Avatar billede dotcom1 Nybegynder
10. januar 2006 - 10:00 #6
Virker fint. Opdagede at man også bare kan sætte en almindelig bgcolor på de <tr> der ikke skal ændres ved mouseOver.
Roenving, læg et svar.
Avatar billede roenving Novice
10. januar 2006 - 16:04 #7
Okay, jeg er da gerne med på en deler '-)
Avatar billede dotcom1 Nybegynder
10. januar 2006 - 21:03 #8
Ja nemlig ja. :)
Avatar billede roenving Novice
11. januar 2006 - 13:47 #9
Tak for point ;~}
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