cambiar borde etiqueta TD onclick

11 views
Skip to first unread message

LuisDavid

unread,
Jul 12, 2009, 2:41:36 PM7/12/09
to JS-Ovillo
buenos dias grupo, tenia este problema, como puedo hacer para que
cambie el fondo de una celda, haciendo click, que cambie celda por
celda, no todas a la vez como se muestra:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script type="text/javascript">
window.onload = function(){
docCells = document.getElementsByTagName("td");
for(i=0;i<docCells.length;i++){
docCells[i].onmouseover = new Function ("if
(this.style.backgroundColor == '')this.style.backgroundColor =
'blue'");
docCells[i].onmouseout = new Function ("if
(this.style.backgroundColor == 'blue')this.style.backgroundColor =
''");
docCells[i].onclick = new Function("if
(this.style.backgroundColor ==
'blue')this.style.backgroundColor = 'red'");
}
}

</script>
<style type="text/css">
td{border:thin solid silver;}
</style>
</head>
<body>
<table>
<tr>
<td>Cell 1-1</td><td>Cell 1-2</td>
</tr>
<tr>
<td>Cell 2-1</td><td>Cell 2-2</td>
</tr>
</table>
</body>
</html>

la idea es que quede resaltado una celda, la que elija el usuario, y
no todas, como me queda, como puedo hacerlo, ayuda grupo; gracias de
antemano, por la ayuda que me puedan brindar.

Miguel Beltran R.

unread,
Jul 13, 2009, 6:59:01 PM7/13/09
to js-o...@googlegroups.com
la copie y pegue tal como la pusiste y me marca error. En FF e IE8.
¿no usas algún framework de javascript como prototype?

Bueno, aqui esta funcionando


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
      <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js" type="application/javascript"></script>
<script type="application/javascript">
document.observe('dom:loaded', function(){
   $$('td').each(function(el){
            el.observe('mouseover', function(evt){console.log(el.getStyle('backgroundColor'));
               if(el.getStyle('backgroundColor')=='transparent')el.setStyle({'backgroundColor': 'blue'});
            });
            el.observe('mouseout', function(evt){
               if(el.getStyle('backgroundColor')=='blue')el.setStyle({'backgroundColor': 'transparent'});
            });
            el.observe('click', function(evt){
               el.setStyle({'backgroundColor': 'red'});
            });
         })

});

</script>
<style type="text/css">
td{border:thin solid silver;}
</style>
</head>
<body>
<table>
      <tr>
              <td>Cell 1-1</td><td>Cell 1-2</td>
      </tr>
      <tr>
              <td>Cell 2-1</td><td>Cell 2-2</td>
      </tr>
</table>
</body>
</html>
--
________________________________________
Lo bueno de vivir un dia mas
es saber que nos queda un dia menos de vida

Miguel Beltran R.

unread,
Jul 13, 2009, 7:35:17 PM7/13/09
to js-o...@googlegroups.com
Un problema con IE (para variar)
No le gusta al IE8 (y de seguro anteriores) que en script le puse type="application/javascript", cambialo por "text/javascript"

"text/javascript" is obsolete
http://www.rfc-editor.org/rfc/rfc4329.txt
Reply all
Reply to author
Forward
0 new messages