JavaScript - Seleccionar varias celdas con mouseover

   
Vista:

Seleccionar varias celdas con mouseover

Publicado por maria anie (3 intervenciones) el 01/12/2008 21:36:27
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>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

RE:Seleccionar varias celdas con mouseover

Publicado por PasabaPorAqui (52 intervenciones) el 03/12/2008 12:07:58
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.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:Seleccionar varias celdas con mouseover

Publicado por mariaanie (3 intervenciones) el 03/12/2008 13:54:27
hola, pues si hice eso y funciona correctamente muchas gracias y un saludo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar