¿Cómo oculto el medio de una tabla usando jQuery?

Tengo una tabla muy larga de 3 columnas. Me gustaría¿Cómo oculto el medio de una tabla usando jQuery?

<table> 
    <tr><td>Column1</td><td>Column2</td></tr> 
    <tr><td>Column1</td><td>Column2</td></tr> 
    <tr><td>Start</td><td>Hiding</td></tr> 
    <tr><td>Column1</td><td>Column2</td></tr> 
    <tr><td>Column1</td><td>Column2</td></tr> 
    <tr><td>Column1</td><td>Column2</td></tr> 
    <tr><td>End</td><td>Hiding</td></tr> 
    <tr><td>Column1</td><td>Column2</td></tr> 
    <tr><td>Column1</td><td>Column2</td></tr> 
</table>

Este es el resultado que trato de obtener con jQuery.

Column1 Column2 
Column1 Column2 
...Show Full Table... 
Column1 Column2 
Column1 Column2

me gustaría utilizar la función de mostrar/ocultar de jQuery para reducir al mínimo la tabla pero todavía mostrar parte de las filas superior e inferior. Las filas del medio deben reemplazarse con texto como "Mostrar tabla completa" y cuando se haga clic se expandirá para mostrar la tabla completa de principio a fin.

¿Cuál es la mejor manera de hacer esto en jQuery?

BTW Ya he intentado agregar una clase "Table_Middle" a algunas de las filas, pero no la oculta por completo, el espacio que ocupa todavía está allí y no tengo el texto para darle al usuario un modo para expandir la mesa por completo

[EDIT] Añadido Ejemplo de Trabajo HTML inspirado en respuesta publicados de Paraná

El ejemplo siguiente es un ejemplo de trabajo completa, usted ni siquiera necesita descargar jQuery. Simplemente pegue en un archivo HTML en blanco.

Se degrada muy bien para mostrar solo la tabla completa si Javascript está desactivado. Si Javascript está activado, oculta las filas de la tabla central y agrega los enlaces mostrar/ocultar.

<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> 
     <title>Example Show/Hide Middle rows of a table using jQuery</title> 
     <script src="http://code.jquery.com/jquery-latest.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $("#HiddenRowsNotice").html("<tr><td colspan='2'> <a href='#'>>> some rows hidden <<</a></td></tr>"); 
       $("#ShowHide").html("<tr><td colspan='2'><a href='#'>show/hide middle rows</a></td></tr>"); 
       $("#HiddenRows").hide(); 

       $('#ShowHide,#HiddenRowsNotice').click(function() { 
        $('#HiddenRows').toggle(); 
        $('#HiddenRowsNotice').toggle(); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <table> 
      <tbody id="ShowHide"></tbody> 
       <tr><th>Month Name</th><th>Month</th></tr> 
      <tbody> 
       <tr><td>Jan</td><td>1</td></tr>  
      </tbody> 
      <tbody id="HiddenRowsNotice"></tbody> 
      <tbody id="HiddenRows"> 
       <tr><td>Feb</td><td>2</td></tr> 
       <tr><td>Mar</td><td>3</td></tr> 
       <tr><td>Apr</td><td>4</td></tr>  
      </tbody> 
      <tbody> 
       <tr><td>May</td><td>5</td></tr>    
      </tbody> 
     </table> 
    </body> 
</html>

enlace [editar] mi blog post y trabajando ejemplo.

Fuente

2008-10-18 Brian Boatright

Algo como esto podría funcionar:

<table> 
    <tbody> 
     <tr><td>Column1</td><td>Column2</td></tr> 
     <tr><td>Column1</td><td>Column2</td></tr> 
     <tr class="Show_Rows"><td>Start</td><td>Hiding</td></tr> 
    </tbody> 
    <tbody class="Table_Middle" style="display:none"> 
     <tr><td>Column1</td><td>Column2</td></tr> 
     <tr><td>Column1</td><td>Column2</td></tr> 
     <tr><td>Column1</td><td>Column2</td></tr> 
    </tbody> 
    <tbody> 
     <tr class="Show_Rows"><td>End</td><td>Hiding</td></tr> 
     <tr><td>Column1</td><td>Column2</td></tr> 
     <tr><td>Column1</td><td>Column2</td></tr> 
    </tbody> 
</table> 


$('#something').click(function() { 
    $('.Table_Middle').hide(); 
    $('.Show_Rows').show(); 
}); 

$('.Show_Rows').click(function() { 
    $('.Show_Rows').hide(); 
    $('.Table_Middle').show(); 
});

Fuente

2008-10-18 16:33:00 Parand

La forma más sencilla es añadir un <tbody> para agrupar las filas y alternar entre que none y table-row-group (excepciones de captura y la pusieron a block para IE). No estoy seguro sobre hacerlo específico para jquery, pero esa es la manera "normal" de hacer las cosas.

Fuente

2008-10-18 16:27:43 Greg

probablemente lo haría así:

<table> 
    <thead> 
     <tr> 
      <th>Col1</th> 
      <th>Col2</th> 
      <th>Col3</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>data1</td> 
      <td>data1</td> 
      <td>data1</td> 
     </tr> 
     ... 
    </tbody> 
    <tbody id="hidden-rows"> 
     <tr> 
      <td colspan="3"> 
       <a href="#" onclick="$('#hidden-rows').hide();$('#extra-rows').show();"> 
        Show hidden rows 
       </a> 
      </td> 
     </tr> 
    </tbody> 
    <tbody id="extra-rows" style="display: none;"> 
     <tr> 
      <td>data1</td> 
      <td>data1</td> 
      <td>data1</td> 
     </tr> 
     ... 
    </tbody> 
    <tbody> 
     <tr> 
      <td>data1</td> 
      <td>data1</td> 
      <td>data1</td> 
     </tr> 
     ... 
    </tbody> 
</table>

No es un gran método, ya que no se degrada muy bien.

Para conseguir que se degradan muy bien, usted tiene que tener todas las filas muestran inicialmente, y luego ocultarlos con su función de lista de documentos jQuery, y también crear la fila con el enlace en.

Además, su método de dar las filas para ocultar una clase particular también debería funcionar. El jQuery sería algo como esto:

$(document).ready(function() { 
    $('tr.Table_Middle').hide(); 
});

usted todavía necesita para crear la fila con el enlace para mostrarlos sin embargo.

Fuente

2008-10-18 16:35:38 SpoonMeiser

Si le das a tus etiquetas del medio <tr /> la clase "Table_Middle", es mucho más fácil de hacer. Entonces solo toma unas pocas líneas de jQuery. Uno para agregar la fila "Mostrar tabla completa" y otra para agregar un oyente de clic para esa fila.Asegúrese de cambiar el valor "X" del atributo colspan por la cantidad de columnas en su tabla.

// jQuery chaining is useful here 
$(".Table_Middle").hide() 
        .eq(0) 
        .before('<tr colspan="X" class="showFull">Show Full Table<tr/>'); 

$(".showFull").click(function() { 
    $(this).toggle(); 
    $(".Table_Middle").toggle(); 
});

Esto es útil porque se degrada fácilmente y es accesible a través de muchos navegadores/dispositivos. Si JavaScript está desactivado o CSS está deshabilitado (o cualquier otro escenario que pueda hacer que este código no sea compatible), no hay una fila "mostrar tabla completa".

Fuente

2008-10-18 16:40:00

¿Ha probado esto creo que el método get devuelve un objeto DOM, no un jQuery? objeto, y creo solo está ocultando esa primera fila Table_Middle porque se llama hide después de get. Tampoco lo he probado, pero si estoy en lo cierto, entonces debe volver a organizarse para que funcione. – SpoonMeiser

Tienes razón. No puedo creer que me haya perdido eso. "get()" devuelve un objeto DOM. He actualizado mi muestra de código para reconocer eso. –

Puede usar .eq (0) en lugar de .get (0) para devolver jQuery en lugar de un elemento DOM. Pero esta es totalmente la mejor respuesta aquí. – SpoonMeiser

Aquí hay una solución que no requiere ningún marcado extra y se degrada muy bien.

<table id="myTable"> 
    <tbody> 
     <tr><td>Cell</td><td>Cell</td></tr> 
     <tr><td>Cell</td><td>Cell</td></tr> 
     <tr><td>Cell</td><td>Cell</td></tr> 
     <tr><td>Cell</td><td>Cell</td></tr> 
     <tr><td>Cell</td><td>Cell</td></tr> 
    </tbody> 
</table>

y el jQuery ... He codificada de manera no en algunas cosas aquí (como el identificador de la tabla, número de filas que se muestran, etc. Estos podrían ponerse en un atributo class sobre la mesa si quería que sea más reutilizable (por ejemplo: <table class="hidey_2">).

var showTopAndBottom = 2, 
    minRows = 4, 
    $rows = $('#myTable tr').length), 
    length = $rows.length 
; 
if (length > minRows) { 
    $rows 
     .slice(showTopAndBottom, length - showTopAndBottom) 
     .hide() 
    ; 
    $rows 
     .eq(showTopAndBottom - 1) 
     .after(
      // this colspan could be worked out by counting the cells in another row 
      $("<tr><td colspan=\"2\">Show</td></tr>").click(function() { 
       $(this) 
        .remove() 
        .nextAll() 
        .show() 
       ; 
      }) 
     ) 
    ; 
}

Fuente

2008-10-20 01:39:34 nickf

Try método slice() para usar:

$("#table tr").slice(1, 4).hide();

Fuente

2009-10-23 20:05:33

¿Cómo oculto el medio de una tabla usando jQuery?

Respuesta

Cuestiones relacionadas