Kod:
<style media="all" type="text/css">
body, html {
font-family: Tahoma, sans-serif;
font-size: 11px;
color: #EEEEEE;
background-color: #2A2A2A;
}
td {
width: 50px;
border: 1px solid #999999;
cursor: pointer;
text-align: center;
}
.row {
background-color: #444444;
}
.rowhighlight {
background-color: #666666;
font-weight: bold;
}
</style>
<script language="javascript" type="text/javascript">
var tablewidth = 4;
var tableheight = 4;
function cellevent( id, isover ) {
var arr = id.split( 'x' );
var x = arr[ 0 ];
var y = arr[ 1 ];
if( isover ) {
var classnm = 'rowhighlight';
}
else {
var classnm = 'row';
}
for( var counter = 1; counter <= tablewidth; counter ++ ) {
********.getElementById( x + 'x' + counter ).className = classnm;
}
for( var counter = 1; counter <= tableheight; counter ++ ) {
********.getElementById( counter + 'x' + y ).className = classnm;
}
}
</script>
<table>
<tr>
<td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="1x1">1</td>
<td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="1x2">2</td>
<td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="1x3">3</td>
<td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="1x4">4</td>
</tr>
<tr>
<td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="2x1">5</td>
<td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="2x2">6</td>
<td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="2x3">7</td>
<td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="2x4">8</td>
</tr>
<tr>
<td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="3x1">9</td>
<td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="3x2">10</td>
<td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="3x3">11</td>
<td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="3x4">12</td>
</tr>
<tr>
<td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="4x1">13</td>
<td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="4x2">14</td>
<td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="4x3">15</td>
<td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="4x4">16</td>
</tr>
</table>