contar celdas "toggleadas" de una tabla

[ulisespalacios]

Antes que nada, muchas gracias por tomarse el tiempo para leer mi post. El punto es el siguiente:

Tengo una tabla html con dos renglones y seis celdas cada renglón. He aplicado la función toggleClass y al enviar la forma (submit), necesito saber cuántas de esas celdas han sido "toggleadas" para, de esta manera, devolverle al usuario el número.

Alguien sabe cómo puedo hacerlo?

Agradezco de antemanos sus respuestas

Fragmento de código

Código:

            
<!-- Tabla de meses toggled -->
   <div id="meses"  class="meses">
    <table cellspacing="0" border="1" >
   <tr>
  <td class="color" valign="middle" align="left" id="mes01">Enero
     </td>

Saludos

U.

[angelfcm]

Hola!,
no entiendo muy bien a que te refieres con togglearlas explica de otra manera porfavor y pon todo el codigo que estas usando para eso, saludos!

[ulisespalacios]

Antes que nada, gracias por tu atención e interés. Explico:

Tengo el estilo:

Código:

        <style type="text/css">
            .fondotd{ background-color: #0000ff;}
        </style>

La tabla:

Código:

            <div id="meses"  class="meses">
                <table cellspacing="0" border="1" >
                    <tr>
                        <td class="color" valign="middle" align="left" id="mes01">Enero
                        </td>
                        <td bgcolor="#f0f0f0" valign="middle" align="left">
                            <input type="text" name="anio" value="11" size="2" maxlength="2" onblur="validaYear(this)" id="yearMes01" />
                        </td>
                        <td class="color" valign="middle" align="left" id="mes02">
                            Febrero
                        </td> ...

El toggle:

Código:

        $(document).ready(function(){
            $("td.color").live('click', function(){
                $(this).toggleClass("fondotd");
                });

           });

El usuario puede hacer toggle las veces que quiera. Al final se muestran la cantidad de meses "toggleados" (coloreados). Por ejemplo, el usuario hace clic en el td Enero, Marzo y Diciembre. En una variable tengo que capturar el número de meses: 3

Gracias de antemano por tu atención y ayuda

Saludos

U.

[angelfcm]

Hola!, justamente estaba repasando las clases en javascript y con tu problema hize una clase especialmente para lo que necesistas.

Primero agrega éste script:

Código Javascript:

<script type="text/javascript">
var meses=new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
var selecciones={ mes01:"no",
                  mes02:"no",
                  mes03:"no",
                  mes04:"no",
                  mes05:"no",
                  mes06:"no",
                  mes07:"no",
                  mes08:"no",
                  mes09:"no",
                  mes10:"no",
                  mes11:"no",
                  mes12:"no",
                  cantidad:0,
                  cadena:"",
                  coleccion:"",
                  anclarMes:function(m){
                   n=parseInt(m.replace(/mes0?/i,""))-1;
                   s=selecciones;
                   m=meses[n];
                   s.cadena+=(s.cadena=="")?m:","+m;
                   s.coleccion=s.cadena.split(",");
                  },
                  desanclarMes:function(m){
                   n=parseInt(m.replace(/mes0?/i,""))-1;
                   s=selecciones;
                   m=meses[n];
                   s.cadena=s.cadena.replace(new RegExp("(^("+m+"),?|(,"+m+"))","i"),"");
                   s.coleccion=s.cadena.split(",");
                  } };
function guardarSelecciones(This){
   with(This){
     if(attr("class")=="color fondotd"){
       selecciones[attr("id")]="si";
       selecciones.anclarMes(attr("id"));
       selecciones.cantidad++;}
     else{
       selecciones[attr("id")]="no";
       selecciones.desanclarMes(attr("id"));
       selecciones.cantidad--;}
   }
}
</script>
 

Ahora cambia:

Código Javascript:

$(document).ready(function(){
            $("td.color").live('click', function(){
                $(this).toggleClass("fondotd");
                });
 
           });
 

Por:

Código Javascript:

$(document).ready(function(){
            $("td.color").live('click', function(){
                $(this).toggleClass("fondotd");
                 guardarSelecciones($(this));
                });
           });
 

Prácticamente es agregar la función guardarSelecciones($(this)); dentro de la función del evento click

Listo!!! Ahora te explico como obtener la cantidad de los meses seleccionados y más.

• Propiedad selecciones.cantidad - devuelve el número de meses seleccionados.
• Propiedad selecciones.cadena - devuelve los nombres de los meses seleccionados en un sólo string(No se ordenan).
• Colección(Array) selecciones.coleccion[Número] - los meses seleccionados son almacenados aquí(No se ordenan).
• Propiedades mes01, mes02...(hasta el mes12) - devuelve "si" cuando el mes fué seleccionado y "no" cuando no fué seleccionado(Ordenados por mes: enero, febrero, marzo, etc.)

Espero que sea de tu agrado.
Lee bien para que no vallas a copiar algo mal, ya que el código funciona perfectamente!, Saludos!

[ulisespalacios]

Angelfcm:

Muchas gracias por el apoyo. En este momento lo implemento y te cuento cómo me fue. Sin embargo te agradezco de antemano por el auxilio

Saludos
Ulises

[angelfcm]

Ok, avisame si pasa cualquier inconveniente, saludos!

[ulisespalacios]

Angel:

Te quedó genial! Muchas gracias por el apoyo. Ya lo implementé y está funcionando. Aunque a la hora de pasar los resultados al grid, se sigue incrementando el contador. Pero vaya! ese es un problema menor que veré cómo resolver.

En sí el script es genial
Muchas gracias
U.