Tengo una tabla de contenido

<table>
<thead>
  <tr>
    <th>First Name </th>
    <th>Last Name </th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr class="odd">
    <td>John</td>
    <td>Deo</td>
    <td><a class="personal-checking-more-link">More</a></td>
  </tr>
  <tr><td style="display:none" colspan="3">Description goes for 1st row</td></tr>
  <tr class="odd">
    <td>Jaden</td>
    <td>Aidan</td>
    <td><a class="personal-checking-more-link">More</a></td>
  </tr>
  <tr><td style="display:none" colspan="3">Description goes for 2nd row</td></tr>
</tbody>

Cuando hago clic en Más, a continuación, la 1ª hilera de la Descripción se muestra. muestra perfactly pero colspan no funciona.

aquí está mi código js

personalChecking = function () {
        $('a.personal-checking-more-link').click(function() {
            $(this).parent().parent().next().toggle('slow');
        });

    }
$(document).ready(personalChecking);

Gracias de antemano

  • ¿Cómo es esto de 4 años pregunta de un duplicado de un día de edad de la pregunta?
InformationsquelleAutor user109332 | 2009-05-19

9 Comentarios

  1. 5

    Este es el problema con los «display:block’

    Por favor, consulte el enlace de abajo
    http://thedesignspace.net/MT2archives/000376.html#.UUrg3FfCd1u

    Si usted está ocultando tr, a continuación, utilice ‘display:table-row’ en lugar de ‘display:block’ para mostrar que tr,

    Si usted está ocultando td, a continuación, utilice ‘display:table-cell’ en lugar de ‘display:block’ para mostrar que td

  2. 4

    El problema parece estar en el estilo que se aplica a la hora de mostrar un elemento. Es establecer el estilo «display:block», que parece estar jugando con colspan. Aquí están algunas soluciones que se me ocurrió, pero no son perfectos.

    Este tiene cecina annimation:

    personalChecking = function () {
        $('a.personal-checking-more-link').click(function() {
            $(this).parent().parent().next().toggle('slow', function() {
                if($(this).css('display') == 'block')
                {
                    $(this).css('display', '');
                }               
            });
        });
    }

    Y éste no tiene annimation a todos:

    personalChecking = function () {
        $('a.personal-checking-more-link').click(function() {
            var nextRow = $(this).parent().parent().next();
            if(nextRow.css('display') == 'none')
            {
                nextRow.css('display','');
            }
            else
            {
                nextRow.css('display', 'none');
            }
        });
    }
  3. 2

    El problema es que están cambiando el TR, no la TD dentro de ella

    $(this).parent().parent().next()
       1      2         3       4
    • 1 es Un

    • 2 es el TD el 1 es en

    • 3 es el TR que 2 es en

    • 4 es el TR abajo 3

    Pero su pantalla:ninguna está en el TD dentro de eso.

    Por lo que recomiendo:

    $("td",$(this).parent().parent().next()).toggle('slow');

    donde el interior $ te el que contiene TR, y luego lo usa como contexto para el «td» de la selección.

    • Yo tengo un problema similar al del interrogador, estoy activando una TR que ha colspan ed TDs. Cuando me alternar el TR, no entiendo por qué no está haciendo el TDs visible.
    • Acabo de swithed de uso de slideToggle() para activar() y ahora funciona. Parece que con slideToggle el TDs no se muestran
    • En el hecho de alternar(«slow») rompe cosas así. Así que, básicamente, cualquier cosa animada causa el problema
  4. 2

    Me encontré con que el firefox ‘problema’ es porque debe tener display:table-row. Es decir el fallo parece justo después de su glitches convertido interpretarse como norma de comportamiento.

    Así que la mejor solución es utilizar addClass(«someClass») y removeClass(«someClass») para hacer las cosas ocultas. (con una regla CSS: someClass {display:none;})

    Esto tiene el inconveniente de no ser animado. Mi solución podría manejar eso. Si no puede crear secuencias de comandos en el css(‘display’,’table-row’) de alguna manera.

    -Clint

  5. 2

    Han intentado sin animación? es decir, sólo toggle()

    Yo tengo el mismo problema, parece que la animación alterna no están haciendo los COLSPAN ed TDs aparecen. Tengo todos mis fila contenidos que pudieran aparecer en uno de los no COLSPAN ed columnas. Cuando lo cambio a un simple toggle() funcionan las cosas.

  6. 2

    La mejor manera de hacerlo es mediante la devolución de llamada

    personalChecking = function () {
        $('a.personal-checking-more-link').click(function() {
            $(this).parent().parent().next().show('slow', function() {           
                $(this).attr("colspan", "3");
            });
        });
    }

    de esta manera FireFox y Chrome se sabe cómo mostrar el td exactaly

  7. 1

    Lo siento fue mi error. estilo etiqueta debe ser el lugar en TR no en TD

      <tr style="display:none"><td colspan="3">Description goes for 1st row</td></tr>
      <tr style="display:none"><td colspan="3">Description goes for 2nd row</td></tr>
  8. 0

    De que tenía problemas con jQuery y mostrar y ocultar /deslizamiento de las filas de la tabla en el pasado, en la final tuve que conseguir jQuery para envolver el seleccionado de td en un div y, a continuación, mostrar /ocultar que, no sé, pero en un corto plazo de tiempo en que trabajó.

    Sólo es algo a tener en cuenta si usted tiene problemas similares con la animación.

Dejar respuesta

Please enter your comment!
Please enter your name here