Cambiar color de celda

alrockbit · #1 (**permalink**) 14/10/2010, 07:17

Hola de nuevo. Quiero que una celda de una tabla cambie de color al hacer click , y al volver hacer click en ella de nuevo vuelva al color original. Utilizo jquery:

Código:

<SCRIPT>

$(document).ready(function(){

	$("td").click(function(){
		if($(this).attr("bgcolor")==$(this).attr("#dddddd")){
			$(this).attr("bgcolor","#ff00ff");	}
		else{
			$(this).attr("bgcolor","#dddddd");	}	
	});
});

</SCRIPT>

En el ejemplo algo falla porque solo puedo cambiar el color al hacer click y volverlo a poner con otro click pero ya no me deja mas. ¿Alguien sabria como hacerlo con jquery? Gracias.

kokoou · #2 (**permalink**) 14/10/2010, 07:25

Código Javascript:

Ver original$(document).ready(function(){
  $("td").click(function(){     
    if( $(this).attr("bgcolor") == "#dddddd" ){
      $(this).attr("bgcolor","#ff00ff");
    }
    else{
      $(this).attr("bgcolor","#dddddd");    
    }   
  });
});

El error está aquí:

Código Javascript:

Ver originalif( $(this).attr("bgcolor") == $(this).attr("#dddddd") )

Ahí tu IF está comparando si el atributo bgcolor es igual al atributo #dddddd, que obviamente no existe.

chicohot20 · #3 (**permalink**) 14/10/2010, 07:37

Prueba con esto:

Código HTML:

Ver original<style>
.color{
        background-color: #ff00ff;
}
</style>
<script>    
   $(document).ready(function(){
        $("table.mitabla td").toggle(function(){
          $(this).addClass("color");
        },function(){
          $(this).removeClass("color");
        });
    });
</script>
 
<table class="mitabla">
   <tr><td>Celda 1</td></tr>
   <tr><td>Celda 2</td></tr>
</table>

kokoou · #4 (**permalink**) 14/10/2010, 08:06

Chicohot20, para hacer el toogle de una clase, tienes el método toggleClass. De manera que lo que tu pusiste se puede simplificar:

Código Javascript:

Ver original<html>
    <head>
        <style type="text/css">
            .color{
                background-color: #ff00ff;
            }
        </style>
        <script type="text/javascript">
            $(document).ready(function(){
                $("table.mitabla td").click(function(){
                    $(this).toggleClass("color");
                });
            });
        </script>
    </head>
    <body>
        <table class="mitabla">
            <tr><td>Celda 1</td></tr>
            <tr><td>Celda 2</td></tr>
        </table>
    </body>
</html>

chicohot20 · #5 (**permalink**) 14/10/2010, 08:50

buen aporte kokoou tengo que leer más jejeje.

alrockbit · #6 (**permalink**) 14/10/2010, 08:53

Perfecto. Muchas gracias

kokoou · #7 (**permalink**) 15/10/2010, 05:39

De nada(; Me alegro que haya servido.