Advanced table highlighting

I have a table with 24 cells per row and would like to highlight only half of a row when the mouse hovers over it (If I hover on cell 1-12, highlight the first twelve. If I hover on cell 13-24, highlight the last twelve). There has got to be a better way to do it than this.

Sample table:

[CODE]<table>
<tr>
<td onmouseover=’HiOn1(this)’ onmouseout=’HiOff1(this)’>blah1</td>
<td onmouseover=’HiOn2(this)’ onmouseout=’HiOff2(this)’>blah2</td>
<td onmouseover=’HiOn3(this)’ onmouseout=’HiOff3(this)’>blah3</td>
<td onmouseover=’HiOn4(this)’ onmouseout=’HiOff4(this)’>blah4</td>
<td onmouseover=’HiOn5(this)’ onmouseout=’HiOff5(this)’>blah5</td>
<td onmouseover=’HiOn6(this)’ onmouseout=’HiOff6(this)’>blah6</td>
<td onmouseover=’HiOn7(this)’ onmouseout=’HiOff7(this)’>blah7</td>
<td onmouseover=’HiOn8(this)’ onmouseout=’HiOff8(this)’>blah8</td>
<td onmouseover=’HiOn9(this)’ onmouseout=’HiOff9(this)’>blah9</td>
<td onmouseover=’HiOn10(this)’ onmouseout=’HiOff10(this)’>blah10</td>
<td onmouseover=’HiOn11(this)’ onmouseout=’HiOf11(this)’>blah11</td>
<td onmouseover=’HiOn12(this)’ onmouseout=’HiOff12(this)’>blah12</td>

<td onmouseover=’HiOn1(this)’ onmouseout=’HiOff1(this)’>blah13</td>
<td onmouseover=’HiOn2(this)’ onmouseout=’HiOff2(this)’>blah14</td>
<td onmouseover=’HiOn3(this)’ onmouseout=’HiOff3(this)’>blah15</td>
<td onmouseover=’HiOn4(this)’ onmouseout=’HiOff4(this)’>blah16</td>
<td onmouseover=’HiOn5(this)’ onmouseout=’HiOff5(this)’>blah17</td>
<td onmouseover=’HiOn6(this)’ onmouseout=’HiOff6(this)’>blah18</td>
<td onmouseover=’HiOn7(this)’ onmouseout=’HiOff7(this)’>blah19</td>
<td onmouseover=’HiOn8(this)’ onmouseout=’HiOff8(this)’>blah20</td>
<td onmouseover=’HiOn9(this)’ onmouseout=’HiOff9(this)’>blah21</td>
<td onmouseover=’HiOn10(this)’ onmouseout=’HiOff10(this)’>blah22</td>
<td onmouseover=’HiOn11(this)’ onmouseout=’HiOf11(this)’>blah23</td>
<td onmouseover=’HiOn12(this)’ onmouseout=’HiOff12(this)’>blah24</td>
</tr>
</table>[/CODE]

Sample functions:

[CODE]function HiOn1(x){
x.style.backgroundColor=”gray”
x.nextSibling.style.backgroundColor=”gray”
x.nextSibling.nextSibling.style.backgroundColor=”gray”
x.nextSibling.nextSibling.nextSibling.style.backgroundColor=”gray”
x.nextSibling.nextSibling.nextSibling.nextSibling.style.backgroundColor=”gray”
x.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.style.backgroundColor=”gray”
x.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.style.backgroundColor=”gray”
x.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.style.backgroundColor=”gray”
x.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.style.backgroundColor=”gray”
x.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.style.backgroundColor=”gray”
x.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.style.backgroundColor=”gray”
x.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.style.backgroundColor=”gray”
}

function HiOff1(x){
x.style.backgroundColor=”white”
x.nextSibling.style.backgroundColor=”white”
x.nextSibling.nextSibling.style.backgroundColor=”white”
x.nextSibling.nextSibling.nextSibling.style.backgroundColor=”white”
x.nextSibling.nextSibling.nextSibling.nextSibling.style.backgroundColor=”white”
x.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.style.backgroundColor=”white”
x.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.style.backgroundColor=”white”
x.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.style.backgroundColor=”white”
x.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.style.backgroundColor=”white”
x.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.style.backgroundColor=”white”
x.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.style.backgroundColor=”white”
x.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.style.backgroundColor=”white”
}[/CODE]

…and so on, to make 24 functions of the same size, fitted for each cell… 😮

Also in #JavaScript _↴