✔ Nach CSS - Formatierung kein Zeilehighlighting mehr per JavaScript möglich?

[SeeKing]

Sers Leute,
ich hänge gerade an einem ziemlich seltsamen Problem.

Ich habe die table-Tags via CSS formatiert:

tr
{
font-family:Arial, Helvetica, sans-serif;
background-color:#000000;
font-size:12px;
color:#CCCCCC;
}

td, th
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color:#CCCCCC;
}

Jetzt möchte ich via Javascript die Zeilen mit einem Highlighting versehen. Ich habe dazu die
"this" Referenz benutzt.

<tr onMouseOver="this.bgColor='#a6a6ff'" onMouseOut="this.bgColor=''">
<td width="240"><? echo $row["artnr"];?></td>
<input type="hidden" name="artnr" value="<? echo $row["artnr"];?>">
<td><? echo $row["artbez"];?></td>
<td width="1%" align="right" nowrap><!--<input type="submit" value="Bearbeiten">--><img src="../bilder/artbearb.jpg" alt="Artikel (<? echo $row["artnr"];?>) bearbeiten" onclick="JavaScript:window.document.artedit<? echo $i;?>.submit()"><img src="../bilder/1px_space.gif" width="3" height="1"><img src="../bilder/artdel.jpg" alt="Artikel (<? echo $row["artnr"];?>) l&ouml;schen" border="0" onClick="JavaScript:var check = window.confirm('Wollen Sie den Artikel <? echo $row["artbez"];?> wirklich loeschen?'); if (check == true) {location.href='./artver.php?action=artdel&artnr=<? echo $row["artnr"];?>';}"></td>
</tr>

So mein Problem ist nun, dass dies OHNE CSS funktioniert mit CSS allerdings nicht....

Ist das normal?

Schonmal danke für eure Hilfe.

MFG

MixTer

 

[Gumbo]

Probier mal folgendes Script:

function init_highlightTableRows(highlightBackground) {
	var _tableRows = document.getElementsByTagName('tr');
	for(i=0; i<_tableRows.length; i++) {
		var defaultBackgroundColor = _tableRows[i].style.backgroundColor;
		_tableRows[i].onMouseOver = new Function('this.style.backgroundColor = "'+highlightBackground+'"');
		_tableRows[i].onMouseOut = new Function('this.style.backgroundColor = "'+defaultBackground+'"');
	}
}
onload = init_highlightTableRows('#a6a6ff');

 

[xxenon]

Also ich bin mir nicht sicher ob dir das weiterhilft, aber ich musste mal feststellen, dass manche Browser Probleme machen, wenn du CSS-Eigenschaften dynamisch ändern willst, die vorher zentral definiert wurden.

Sprich: Möglicherweise gehts, wenn du die zu ändernden Eigenschaften per Style-Attribut direkt in den Elementen definierst.



MfG. xxenon

 

[Maik]

Hallo,

ich würde der 'dynamischen' Tabellenreihe <tr> eine CSS-Klasse geben und this.style.backgroundColor als Script einsetzen:

tr.dyn
{
font-family:Arial, Helvetica, sans-serif;
background-color:#000000;
font-size:12px;
color:#CCCCCC;
}

td, th
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color:#CCCCCC;
}

<tr class="dyn" onMouseOver="this.style.backgroundColor='#a6a6ff'" onMouseOut="this.style.backgroundColor='#000000'">

Browsercheck: IE 5.5, Moz 1.6, NN 7.0, Op 7.23


greez, maik.l

 

[SeeKing]

Sers,

danke an euch alle.
Die Lösung von michaelsinterface funktioniert.

Auch ein Danke für die anderen Vorschläge. Allerdings gefiel mir die Variante mit
CSS am besten, da diese an einfachsten ist.


MFG
MixTer