[css/js] backgroundColor veranderen via mouseover lukt niet

[shades]

Ik heb een tabel met daarin een aantal rijen en een aantal kolomen. Ik wil de als ik met de muis over een rij beweeg deze hele rij een andere kleur geven. Dit lukt wel door tijdens de mouseover op de rij de hele rij een andere backgroudColor te geven maar nu komt het. De linker kolomen hebben een class voor een bepaalde achtergrond kleur en text eigenschappen. De rechter kolomen weer een andere. Zonder deze classes op te geven werkt het. Zodra ik de classes toevoeg wil de achterground kleur tijden mouse over alleen nog maar veranderen indien ik dat op de cell doe en niet op de rij.

Weet iemand hoe ik dit kan oplossen.

Gebruikte scripje:

JavaScript:

function rowStyle(obj,color, cursor) {
    if(cursor != '') { obj.style.cursor = cursor; }
    obj.style.backgroundColor = color;
}

Stukje van de tabel:

HTML:

<table cellpadding="3" cellspacing="0">
    <tr class="gebTopTR">
        <td class="gebTopTD">Etage</td>
        <td class="gebTopTD">Kamer</td>
        <td class="gebTopTD">Capaciteit</td>
    </tr>
    <tr onMouseOver="rowStyle(this,'#ffcc99','hand');" onMouseOut="rowStyle(this,'transparent','');">
        <td class="gebTD">5</td>
        <td class="gebTD">5.14</td>
        <td class="gebTD">16</td>
    </tr>
    <tr onMouseOver="rowStyle(this,'#ffcc99','hand');" onMouseOut="rowStyle(this,'transparent','');">
        <td class="gebTD">5</td>
        <td class="gebTD">5.17</td>
        <td class="gebTD">2</td>
    </tr>
</table>

Ik heb geen idee hoe dit op te lossen is

[Eskimootje]

Alle childNodes doorlopen en daar de toekenningen doen zal wel werken.

code:

f = obj.childNodes;
for (var k = 0; k < f.length; k++) {
    f[k].style.backgroundColor = color;
    f[k].style.cursor = cursor;
}

[ Voor 63% gewijzigd door Eskimootje op 24-09-2004 09:34 ]

[shades]

Eskimootje schreef op 24 september 2004 @ 09:31:
Alle childNodes doorlopen en daar de toekenningen doen zal wel werken.

code:

f = obj.childNodes;
for (var k = 0; k < f.length; k++) {
    f[k].style.backgroundColor = color;
    f[k].style.cursor = cursor;
}

Dit werkt goed alleen krijg ik nu niet meer de oude kleur van de cellen terug maar die ik op heb gegeven (transparent). Of is het mogelijk om de originele kleur weer terug in te lezen ?

[Eskimootje]

ipv een kleur inherit gebruiken mss ? en anders de classname terugzetten.

[shades]

Eskimootje schreef op 24 september 2004 @ 09:57:
ipv een kleur inherit gebruiken mss ? en anders de classname terugzetten.

Ik heb me even kwaad gemaakt:

HTML:

<tr onMouseOver="rowStyle(this,'#ffcc99','hand');" onMouseOut="rowStyle(this,this.className,'');">

this.className als onMouseOut kleur dus..
Snap niet helemaal waarom het werkt. Je krijgt dan f[k].style.backgroundColor = "gebTopTD" krijg je dan bijvoorbeeld.. Dat is toch echt geen kleurcode..

Edit:
Euh dit werkt ook:

HTML:

<tr onMouseOver="rowStyle(this,'#ffcc99','hand');" onMouseOut="rowStyle(this,'','');">

Ik begrijp hier dus uit dat wanneer je niets opgeeft de 'default' weer wordt gebruikt ?

[ Voor 24% gewijzigd door shades op 24-09-2004 10:06 ]

[crisp]

Als je gewoon wat meer structuur aanbrengt in je markup heb je al die verschillende classes helemaal niet nodig, hooguit nog op de table zelf. Daarmee wordt niet alleen je markup schoner, maar is je probleem ook meteen opgelost:

HTML:

<table class="myTable">
    <thead>
        <tr>
            <th>Etage</th>
            <th>Kamer</th>
            <th>Capaciteit</th>
        </tr>
    </thead>
    <tbody>
        <tr onmouseover="rowStyle(this,'#ffcc99','pointer')" onmouseout="rowStyle(this,'','default')">
            <td>5</td>
            <td>5.14</td>
            <td>16</td>
        </tr>
        <tr onmouseover="rowStyle(this,'#ffcc99','pointer')" onmouseout="rowStyle(this,'','default')">
            <td>5</td>
            <td>5.17</td>
            <td>2</td>
        </tr>
    </tbody>
</table>

Cascading Stylesheet:

table.myTable {
    border: none;
    border-spacing: 0px;
    border-collapse: collapse;
}
table.myTable th, table.myTable td {
    padding: 3px;
}
table.myTable thead tr {
    text-align: left;
    color: #ffffff;
    background-color: #0000ff;
}
table.myTable tbody tr {
    background-color: #00ff00;
}

JavaScript:

function rowStyle(row,color,cursor) {

    row.style.backgroundColor = color;
    row.style.cursor = cursor;

}

Een alternatief is om class-swapping te gebruiken op de TR, maar dat is behoorlijk traag vergeleken met het aanpassen van enkel een paar style-properties en dus af te raden.

[shades]

Dat de css die ik geprutst heb beter kan zie ik al weer uit je voorbeeld maar geeft niet het resultaat wat ik wil.

Hier dus wat ik wel wil. Niet alle kolom hebben dezelfde kleur wat het weer lastig maakt om die op table niveau te definieren. Wat ik nu veranderd heb is ook wat ik wil (al zijn de kleuren natuurlijk een stuk genuanceerder. Is dit wel "toegestaan" of css-correct uitgevoerd ?

(wat doet border-collapse eigenlijk ?)

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
   <head>
      <style>
         table.myTable {
            border: none;
            border-spacing: 0px;
            border-collapse: collapse;
         }
         table.myTable th, table.myTable td {
            padding: 3px;
         }
         table.myTable thead tr {
            text-align: left;
            color: #fff;
            background-color: #00f;
         }
         table.myTable tbody tr {
            background-color: #0f0;
         }
      
         .rood {
            background-color: #f00;
         }
      </style>
      <script type="text/javascript">
         function rowStyle(obj,color, cursor) {
         f = obj.childNodes;
         for (var k = 0; k < f.length; k++) {
            f[k].style.backgroundColor = color;
            f[k].style.cursor = cursor;
            }
         }
      </script>
   </head>
   <body>
      <table class="myTable">
         <thead>
            <tr>
               <th>
                  Etage</th>
               <th>
                  Kamer</th>
               <th>
                  Capaciteit</th>
            </tr>
         </thead>
         <tbody>
            <tr onmouseover="rowStyle(this,'#ffcc99','pointer')"
 onmouseout="rowStyle(this,'','default')">
               <td>5</td>
               <td>5.14</td>
               <td class="rood">16</td>
            </tr>
            <tr onmouseover="rowStyle(this,'#ffcc99','pointer')"
 onmouseout="rowStyle(this,'','default')">
               <td>5</td>
               <td>5.17</td>
               <td class="rood">2</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

[ Voor 19% gewijzigd door shades op 24-09-2004 22:45 ]

[Eskimootje]

border-collapse zorgt dat de borders van de elementen samenvallen, (is alleen voor IE geloof ik de rest heeft het standaard op collapse staan.
Doe maar eens:

Cascading Stylesheet:

table td {
    border: 1px solid #000;
}

HTML:

<html>
    <body>
        <table>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
                <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
    </body>
</html>

[shades]

ah, i see