cambiar borde celda DOM onmouseover - problemas

06-03-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.

06-03-2009

On Jun 3, 10:35*pm, LuisDavid <luisdavi...@gmail.com> wrote:
> (...)
> 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.

06-03-2009

On Jun 3, 11:39*pm, Jorge <jo...@jorgechamorro.com> wrote:
> (...)
> * * * if (target.nodeName === "TD") {
> (...)

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

06-04-2009

LuisDavid wrote:

> <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

06-04-2009

On Jun 4, 10:52*am, Osmo Saarikumpu <o...@weppipakki.com> wrote:
> (...)
> 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.

--
Jorge.

06-24-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.

06-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;
}
.... / ...
}

--
sm

06-25-2009

On 25 jun, 01:16, LuisDavid <luisdavi...@gmail.com> wrote:
> 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,

--
Bart

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Cambiar fondo de etiqueta TD onmouseover onclik	LuisDavid	Javascript	1	07-12-2009 07:13 PM
PROBLEMAS WITH XP FAX CONFIGURATION	=?Utf-8?B?VGF0YXU=?=	Windows 64bit	4	09-13-2006 08:17 PM
PROBLEMAS PERFIL COLOR COREL 12	Icono Print	Windows 64bit	1	05-10-2005 10:09 PM
Problemas con la comunicacion serie, inportb	Vicent	C++	2	10-04-2003 06:26 PM