cambiar borde celda DOM onmouseover - problemas

L

LuisDavid

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">
<!--
function resalta(elEvento){
var evento = elEvento || window.event;
var elDiv = document.getElementById("seccion");
var tds = elDiv.getElementsByTagName("td");
switch (evento.type){
case 'mouseover':
for(var i=0;i<tds.length;i++){
tds.className = "tdclass";
}
break;
case 'mouseout':
for(var i=0;i<tds.length;i++){
tds.className = "";
}
break;
}
}

window.onload = function (){
document.getElementById("seccion").onmouseover = resalta;
document.getElementById("seccion").onmouseout = resalta;
}
-->
</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>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</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.
 
J

Jorge

(...)
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
 
O

Osmo Saarikumpu

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
 
J

Jorge

(...)
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.
 
L

LuisDavid

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">
<!--
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 == "")?target.className = "tdclass":
(target.className == "classtd")?target.className =
"classtd":target.className = "";
break;
case 'mouseout':
(target.className == "tdclass")?target.className = "":
(target.className == "classtd")?target.className =
"classtd":target.className = "";
break;
case 'click':
(target.className == "tdclass")?target.className = "classtd":
(target.className == "classtd")?target.className =
"classtd":target.className = "";
break;
}
}
}
var seccion = document.getElementById("seccion");
seccion.onmouseover = seccion.onmouseout = seccion.onclick = resalta;
}
-->
</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>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</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.
 
S

SAM

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

Bart Van der Donck

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">
<!--
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 == "")?target.className = "tdclass":
(target.className == "classtd")?target.className =
"classtd":target.className = "";
                                break;
                                case 'mouseout':
                                (target.className == "tdclass")?target.className = "":
(target.className == "classtd")?target.className =
"classtd":target.className = "";
                                break;
                                case 'click':
                                (target.className == "tdclass")?target.className = "classtd":
(target.className == "classtd")?target.className =
"classtd":target.className = "";
                                break;
                        }
                }
        }
        var seccion = document.getElementById("seccion");
        seccion.onmouseover = seccion.onmouseout = seccion.onclick = resalta;}

-->
</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>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</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,
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top