[JS] Wie kann ich Tabellenzellen bei Mouseover highlighten?

[Andreas Gaisbauer]

Wie kann ich Tabellenzellen bei Mouseover highlighten?


Einzelne Zellen:

<table width="200" border="1" cellpadding="1" cellspacing="0">
  <tr>
    <td onMouseover="this.bgColor='beige'" onMouseout="this.bgColor='white'">&nbsp;</td>
    <td onMouseover="this.bgColor='beige'" onMouseout="this.bgColor='white'">&nbsp;</td>
    <td onMouseover="this.bgColor='beige'" onMouseout="this.bgColor='white'">&nbsp;</td>
  </tr>
  <tr>
    <td onMouseOver="this.bgColor='beige'" onMouseOut="this.bgColor='white'">&nbsp;</td>
    <td onMouseOver="this.bgColor='beige'" onMouseOut="this.bgColor='white'">&nbsp;</td>
    <td onMouseOver="this.bgColor='beige'" onMouseOut="this.bgColor='white'">&nbsp;</td>
  </tr>
</table>

Einzelne Zeilen:

<table width="200" border="1" cellpadding="1" cellspacing="0">
  <tr onMouseOver="this.bgColor='beige'" onMouseOut="this.bgColor='white'">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr onMouseOver="this.bgColor='beige'" onMouseOut="this.bgColor='white'">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Wenn man nicht alle Zellen einzeln zuweisen will, kann man das auch via Skript erreichen:

<script type="text/javascript">
  function highlight(){
    var td = document.getElementsByTagName('td');
    var x = td.length;

    for(i=0;i<x;i++){
        td[i].onmouseover = new Function("this.bgColor='beige';");
        td[i].onmouseout = new Function("this.bgColor='white';");
    }
  }
</script>