JavaScript - Seleccionar varias celdas con mouseover

Hola, tengo una tabla de tres columnas, en la cual quiero que se marquen las tres celdas de cada fila cuando me ponga con el raton en cualquiera de las tres celdas, como puedo hacer esto un saludo

De momento tengo este codigo pero solo lo hago con una como seria con tres?¿?¿?

<script type="text/javascript">

function unselectAll(){
var lista= $("celda").getElementsByTagName("div");
for (var i = 0; i < lista.length; i++) {
var e=lista[i];
if (e.className && e.className == 'selected' && !(e.selected)) {
e.className= 'unselected';
}
}
}
function unMarkAll(){
var lista= $("celda").getElementsByTagName("div");
for (var i = 0; i < lista.length; i++) {
lista[i].selected=false;
}
}

function seleccionacelda(sel,elt){
if (sel > 0){
unselectAll()
unMarkAll()
elt.selected=true;
incelda(elt);

$("ejecutacelda").disabled=false;
$("ejecutacelda").onclick=function(){
this.disabled=true;
new Ajax.Request("celda.jsp?opcode="+sel,{
method:'get',
onSuccess: function(transport){
var response = transport.responseText ||
"No hay respuesta";
alert(response.replace(/( | )/g,""));

elt.selected=false;
outcelda(elt);
},
onFailure: function(){ alert('Error ejecutando la operacion') }
});
}
}else{
$("ejecutacelda").disabled=true;
}
}
function incelda(elt){
unselectAll()
elt.className="selected"
}
function outcelda(elt){
if (!elt.selected)
elt.className="unselected"
}

</script>
<style type="text/css">
.selected { background-color: black; color: white;}
.unselected { background-color: white; color: black;}
</style>
<div id="celda" style="overflow-y: scroll; overflow-x: scroll; width:180px; height:400px;border: 1px solid black;border-right:0;">

<div style="min-width:50em;">

<table border="0" cellpadding="1" cellspacing="0">

<tr>
<table bgcolor="ivory" border="1" cellpadding="1" cellspacing="0" width="213px">

<c:forEach var="dt" items="${datos.rows}" begin="0" >

<tr>
<td align="center" nowrap>
<div title ="${dt.dt1}" class="unselected" id="celda${dt.dt1}"

onmouseover="incelda(this)"
onmouseout="outcelda(this)"
onclick="seleccionaTelecomando(${dt.dt1},this)" value="${dt.dt1}">${tl.celda1}</div>
</td>
<td align="center" nowrap>
<div title ="${tl.dt2}" class="unselected" id="celda${dt.dt2}"

onmouseover="incelda(this)"
onmouseout="outcelda(this)"
onclick="seleccionacelda(${dt.dt1},this)" value="${dt.dt1}">${tl.celda2}</div>
</td>
<td align="center" nowrap>
<div title ="${tl.dt1}" class="unselected" id="celda${dt.dt3}"

onmouseover="incelda(this)"
onmouseout="outcelda(this)"
onclick="seleccionacelda(${dt.dt1},this)" value="${dt.dt1}">${tl.celda3}</div>
</td>
</tr>

Podrías poner el evento mouseover al tr, e iluminar el tr en lugar de los td. Asi conseguirias el mismo efecto.

No se si te vale la respuesta.

Si no, cuando dispares el mouseover de la celda, podrías coger el this.parentNode, recorrer los childnodes que serían los td e iluminarlos.

hola, pues si hice eso y funciona correctamente muchas gracias y un saludo