# Tabellen Zeile Einfärben



## manuko (23. Februar 2005)

Sers,
  Ich möchte gerne bei hover die Tabellen Zeile (<tr>) einfärben.

  Bisher habe ich diesen Script hier gebaut. 
  Also im CSS Teil:

```
.hoveron { background-color:#CCCCCC;}
  .hoverout { background-color:#000000;}
```
 
  dann in der Tabelle:

```
<tr onMouseOver="this.className='hoveron'" onMouseOut="this.className='hoverout'"> 
   <td class="jo2" width="190">test</td> 
   <td class="jo3" width="190">test</td> 
   </tr>
```
 
 Das ganze funktioniert aus unerklärlichen Gründen nicht. Wenn ich das Ganze hinter ein <td> gebe funktioniert es super. Aber ich will eben die gesamte Zeile (<tr>)
  Wieso klappt das nicht?


----------



## versuch13 (23. Februar 2005)

ok, dann geht es so wie maik es sagt. sorry


----------



## manuko (23. Februar 2005)

natürlich funktioniert das  Witzbold

 Bei den <TD>s gehts ja.
 Ich weiß nur nicht, wieso das nicht bei den <TR> !


----------



## Gumbo (23. Februar 2005)

Probier mal folgendes:
	
	
	



```
[…]

<style type="text/css">
	.over { background-color:#CCCCCC;}
	.out { background-color:#000000;}
</style>
<script type="text/javascript">
	function init() {
		var tableRows = document.getElementsByTagName("tr");
		for(var i=0; i<tableRows.length; i++) {
			tableRows[i].onmouseover = new Function("var i=0; var _c = this.childNodes; for(i; i<_c.length; i++) { if(_c[i].nodeName.toLowerCase()=='td') { _c[i].className='over'; } }");
			tableRows[i].onmouseout = new Function("var i=0; var _c = this.childNodes; for(i; i<_c.length; i++) { if(_c[i].nodeName.toLowerCase()=='td') { _c[i].className='out'; } }");
		}
	}
	window.onload=init;
</script>

[…]

<table>
<tr>
	<td>test</td>
	<td>test</td>
</tr>
</table>

[…]
```


----------



## Maik (23. Februar 2005)

Hallo manuko,

du hast vergessen, dem <tr>-Element seine CSS-Klasse *.hoverout* zu geben:


```
<tr class="hoverout" onMouseOver="this.className='hoveron'" onMouseOut="this.className='hoverout'"> 
   <td class="jo2" width="190">test</td> 
   <td class="jo3" width="190">test</td> 
   </tr>
```


----------



## manuko (25. Februar 2005)

Ok, es lag zwar auch an dem class="..." im <tr> aber bedeutend war, dass ich in den <td> Abschnitten ebenfalls Klassen angegeben habe, drum hats nicht geklappt. 
 Danke


----------

