Cambiar borde celda onMouseOver... problemas

148 views
Skip to first unread message

LuisDavid

unread,
Jun 3, 2009, 4:31:03 PM6/3/09
to Ajax-es
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[i].className = "tdclass";
}
break;
case 'mouseout':
for(var i=0;i<tds.length;i++){
tds[i].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.

Camello Ar

unread,
Jun 12, 2009, 6:16:49 PM6/12/09
to Aja...@googlegroups.com
Estuve analizando un poco y encontré un par de soluciones buenas en
http://www.codigocaxa.net78.net/?p=13
y http://www.codigocaxa.net78.net/?p=22

Si usas PHP podés generar automaticamente los TD con las propiedades "onmouserover" "onmouuseout" para cada uno

Miguel Panuera

unread,
Jun 12, 2009, 6:27:13 PM6/12/09
to Aja...@googlegroups.com
Buenas,
uhmmm
que yo sepa para agregar eventos a un elemento es con
attachEvent()
addEventListener()
Dependiendo del explorador lamentablemente

aqui tienes mas referencias con ejemplos y todo, y san google q siempre ayuda

http://www.anieto2k.com/2006/10/16/gestion-de-eventos-en-javascript/
http://www.captain.at/howto-addeventlistener-attachevent-parameters.php
http://www.forosdelweb.com/f13/agregar-eventos-dinamicamente-attachevent-510841/

Saludos.
--
Miguel Panuera
Estudiante de Pregrado
Ciencias de la Computacion
mpanuera[AT]gmail.com

Isaac Salgado

unread,
Jun 15, 2009, 9:27:20 AM6/15/09
to Aja...@googlegroups.com
Que tal publique mi respuesta hace unos dias pero al parecer no la han publicado

esta es la solucion


<!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 type="text/javascript">
cargarEventos(window, 'load', cargarEfectos, false);

function cargarEventos(elemento,evento,funcion,capturarBurbujeo){
  if(elemento.addEventListener){
    elemento.addEventListener(evento, funcion, capturarBurbujeo);
    return true;
  } else if(elemento.attachEvent){
    elemento.attachEvent('on'+evento, funcion);
    return true;
  } else{
    return false;
  }
}

function cargarEfectos(){
  var tds;
  tds = document.getElementsByTagName('td');
  var indice;
  for(indice=0; indice<tds.length; indice++){
    cargarEventos(tds[indice], 'mouseover', resaltar, false);
    cargarEventos(tds[indice], 'mouseout', noResaltar, false);
  }
}

function resaltar(e){
  var elemento;
  if(window.event)
    elemento = window.event.srcElement;
  else
    elemento = e.target;
 
  elemento.style.border = "1px solid #f00";
}

function noResaltar(e){
  var elemento;
  if(window.event)
    elemento = window.event.srcElement;
  else
    elemento = e.target;
 
  elemento.style.border = "1px solid #00f";
}

/*

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[i].className = "tdclass";
               }
               break;
               case 'mouseout':
               for(var i=0;i<tds.length;i++){
                       tds[i].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="1">
la funcion
function cargarEventos(elemento,evento,funcion,capturarBurbujeo){
inicializa los eventos para la compatibilidad de navegadores

la funcion
function cargarEfectos(){
inicializa los eventos mouseout y mouseover

la funcion
function resaltar(e) y function noResaltar(e)
lo que hace es verificar cual es elemento TD que tiene el foco o pierde o foco
y una ves realiza las modificaciones



isra

unread,
Jun 13, 2009, 4:41:55 PM6/13/09
to Ajax-es
Que tal mira primero que nada aqui esta la solucion

<!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>
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[i].className = "tdclass";
}
break;
case 'mouseout':
for(var i=0;i<tds.length;i++){
tds[i].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="1">
<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>

si te das cuenta utilizo dos funcion
function cargarEventos(elemento,evento,funcion,capturarBurbujeo){

para que exista compatibilidad con diferentes navegadores.
como lo dijo Miguel Panuera usando
attachEvent()
addEventListener()
despues
despues tomamos todas las etiquedas td usando getElementsByTagName
recorremos con un arreglo las etiquetas encontradas y les asignamos
los eventos correspondientes
las funciones
resaltar y noResaltar
primero detectan cual es la etiqueta que tiene el foco o lo pierde
usando
if(window.event)
elemento = window.event.srcElement;
else
elemento = e.target;

y una vez detectada se cambia el borde al la etiqueta correspondiente

Saludos.
Isaac Salgado

LuisDavid

unread,
Jun 24, 2009, 7:27:33 PM6/24/09
to Ajax-es
Ok mira, lo que queria es mas o menos asi, que cambie el borde al
pasar el mouse y al hacer click, quede resaltado, y al clickear otra
celda quede marcada la actual, y la anterior ya no; osea celda por
celda; y no todas como me queda. aqui esta el codigo hasta donde me
entrampe, a ver si me das una mano. se agradece cualquier ayuda.

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

LuisDavid

unread,
Jun 24, 2009, 7:27:13 PM6/24/09
to Ajax-es
Ok mira, lo que queria es mas o menos asi, que cambie el borde al
pasar el mouse y al hacer click, quede resaltado, y al clickear otra
celda quede marcada la actual, y la anterior ya no; osea celda por
celda; y no todas como me queda. aqui esta el codigo hasta donde me
entrampe, a ver si me das una mano. se agradece cualquier ayuda.

<!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;
</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">
Reply all
Reply to author
Forward
0 new messages