cambiar borde celda DOM onmouseover - problemas

LuisDavid · Jun 3, 2009

Hola grupo, buen dia, quisiera plantearles un problemilla que tengo;
tengo este codigo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Celdas</title>
<script language="javascript" type="text/javascript" src="prueba.js">

</script>
<style type="text/css">
td{border:thin solid silver;}
..tdclass{border:thin solid red;}
</style>
</head>

<body>
<table id="seccion" width="200" height="200" border="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
---------------------------------------------------------------------------------------------------
Ahora lo que quiero, es que cambie el borde celda por celda, NO todas
a la vez.
he buscado en la red pero encuentro cosas asi:

<td onmouseover="...." onmouseout="...".....etc,etc.

(no me gusta mezclar javascript con HTML), asi seria facil, pero que
pasaria si tubiera una tabla de 20 celdas (etiquetas TD).
Lo que quiero es usar las funciones DOM para cambiar de estilos, pero
porque no me sale?.
con la funcion getElementsByTagName("td"), que esta mal???, ayuda!!!!.
gracias por la ayuda que puedan brindar.

Jorge · Jun 3, 2009

(...)
Ahora lo que quiero, es que cambie el borde celda por celda, NO todas
a la vez.
(...)

Hola,

Primero has de averiguar qué elemento ha originado el evento (*), y
sólo si es un TD le aplicas el estilo:

<script type="text/javascript">
window.onload= function () {

function resalta (elEvento) {
var evento = elEvento || window.event;
var target= evento.target || evento.srcElement;

if (target.nodeName === "TD") {
switch (evento.type){
case 'mouseover':
target.className = "tdclass";
break;
case 'mouseout':
target.className = "";
break;
}
}
}

var seccion= document.getElementById("seccion");
seccion.onmouseover= seccion.onmouseout= resalta;
};
</script>

....por que todos los elementos contenidos en la tabla (tbody, tr, td)
también van a generar eventos al entrar/salir de ellos con el ratón,
así que te hace falta asegurarte de que solo le tocas el estilo si es
un td que son los que te interesan. Quita si quieres el if
(target.nodeName === "TD") para experimentar con ésto.

Espero que te sirva.

(*)http://www.quirksmode.org/js/events_properties.html

Jorge · Jun 4, 2009

(...)
if (target.nodeName === "TD") {
(...)

if (target.tagName === "TD") {
^^^^^^^

Osmo Saarikumpu · Jun 4, 2009

LuisDavid said:
<script language="javascript" type="text/javascript" src="prueba.js">
<!--
function resalta(elEvento){

[snip]

El codigo dentro del elemento (function resalta(elEvento) y lo que sige)
no es usado, si usas el attributo src (src="prueba.js"). Es uno o el
otro. Ahora tu codigo equivale a:

<script type="text/javascript" src="prueba.js"></script>

El attributo language y los comentarios son obsoletos.

Saludos,
Osmo

Jorge · Jun 4, 2009

(...)
El codigo dentro del elemento (function resalta(elEvento) y lo que sige)
no es usado, si usas el attributo src (src="prueba.js"). Es uno o el
otro. Ahora tu codigo equivale a:

<script type="text/javascript" src="prueba.js"></script>
(...)

Cierto, es verdad. Aunque supongo que simplemente se le olvidó borrar
el src="prueba.js" al editarlo.

LuisDavid · Jun 25, 2009

Ok Jorge Mira es justo lo que queria, funciona; ahora como puedo
aplicarle para que funcione con onClick, me explico, la idea que tengo
es esta:
-------------------------------------------------------------------+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Celdas</title>
<script type="text/javascript">

</script>
<style type="text/css">
td{border:thin solid silver;}
..tdclass{border:thin solid red;}
..classtd{background-color:#CCCCCC;}
</style>
</head>

<body>
<table id="seccion" width="200" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
----------------------------------------------------------------------------------------
lo que quiero es que al hacer click, quede marcado el backGround de la
etiqueta TD, y al hacer click en otra TD quede marcado esta y la
anterior ya no. osea una a una, y NO que queden marcadas todas a la
vez.
a ver si me echas una mano. gracias por tu colaboracion, un saludo.

SAM · Jun 25, 2009

Le 6/25/09 1:16 AM, LuisDavid a écrit :

lo que quiero es que al hacer click, quede marcado el backGround de la
etiqueta TD, y al hacer click en otra TD quede marcado esta y la
anterior ya no. osea una a una, y NO que queden marcadas todas a la
vez.
a ver si me echas una mano. gracias por tu colaboracion, un saludo.

you need in first to delete class from all the Tds
then you can add a class to the clicked/overed TD

CSS :

td { background: #ffc }
..tdclass { background: #eee } /* clic */
..tdclass.classtd { background: #ccc } /* clicado over */
..classtd { background: #ff0 } /* normal over */

Se ha de eliminar las classes de todos los TDs
pues de dar la class al clicado TD

Por los TDs que se ha hecho clicado, se puede agregar una oltra clase a
la existente o no.

JS :

function clearTable() {
var t = document.getElementById('seccion');
t = t.document.getElementsByTagName('TD');
var n = t.length;
if(n)
while(n--) t[n].className = '';
}

function resalta(elEvento){
... / ...
switch(evento.type){
case 'click':
{
clearTable();
target.className = "tdclass"?;
};
break;
case 'mouseover':
target.className = target.className=="tdclass"?
'tdclass classtd' : 'classtd';
break;
case 'mouseout':
target.className = target.className=='classtd'?
'' : 'tdclass';
break;
}
.... / ...
}

Bart Van der Donck · Jun 25, 2009

Ok Jorge Mira es justo lo que queria, funciona; ahora como puedo
aplicarle para que funcione con onClick, me explico, la idea que tengo
es esta:
-------------------------------------------------------------------+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Celdas</title>
<script type="text/javascript">

</script>
<style type="text/css">
td{border:thin solid silver;}
.tdclass{border:thin solid red;}
.classtd{background-color:#CCCCCC;}
</style>
</head>

<body>
<table id="seccion" width="200" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
--------------------------------------------------------------------------- -------------
lo que quiero es que al hacer click, quede marcado el backGround de la
etiqueta TD, y al hacer click en otra TD quede marcado esta y la
anterior ya no. osea una a una, y NO que queden marcadas todas a la
vez.
a ver si me echas una mano. gracias por tu colaboracion, un saludo.

'OnClick' pudo sentir un pedacito artificial; es quizá mejor utilizar
'onMouseout' y 'onMouseup' ?

<td

style="border: 1px solid silver; background-color: transparent;"

onMouseover="this.style.border='1px solid red';
this.style.backgroundColor='transparent';"

onMousedown="this.style.border='1px solid black';
this.style.backgroundColor='#CCCCCC';"

onMouseout="this.style.border='1px solid silver';
this.style.backgroundColor='transparent';"

onMouseup="this.style.border='1px solid red';
this.style.backgroundColor='transparent';"

Espero que esto ayude,

Cambiar fondo de etiqueta TD onmouseover onclik	1	Jul 12, 2009
problemas para mostrar div segun navegador onmousemove onmouseout	0	Nov 11, 2008
mostrar ocultar etiquetas div desde un ID	1	Jun 19, 2008
funciones especiales anidadas	1	Jun 16, 2008
buscar y mostrar div segun datos de entrada	1	May 29, 2008
mostrar ocultar div desde un SELECT	0	Jun 16, 2008
DropDownList Unidos	2	Jan 2, 2008
Ayuda con Ejercicio	6	Nov 19, 2008

cambiar borde celda DOM onmouseover - problemas

LuisDavid

Jorge

Jorge

Osmo Saarikumpu

Jorge

LuisDavid

SAM

Bart Van der Donck

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads