Pregunta Ocultar datos de la tabla usando


Por lo tanto, he ocultado tablas enteras como esta, que funciona bien:

<div style="display:none">
<table>
<tr><th>Test Table</th><tr>
<tr><td>123456789</td><tr>
<tr><td>123456789</td><tr>
<tr><td>123456789</td><tr>
</table>
</div>

Pero quiero ocultar solo un grupo de filas como esta:

<table>
<tr><th>Test Table</th><tr>
<div style="display:none">
<tr><td>123456789</td><tr>
<tr><td>123456789</td><tr>
<tr><td>123456789</td><tr>
</div>
</table>

Pero eso no funciona. ¿Algún consejo?


23
2017-08-02 10:05


origen


Respuestas:


Simplemente aplique el atributo de estilo a la etiqueta tr. En el caso de múltiples etiquetas tr, deberá aplicar el estilo a cada elemento o envolverlos en una etiqueta tbody:

<table>
  <tr><th>Test Table</th><tr>
  <tbody style="display:none">
    <tr><td>123456789</td><tr>
    <tr><td>123456789</td><tr>
    <tr><td>123456789</td><tr>
  </tbody>
</table>

31
2017-08-02 10:09



Desafortunadamente, como div los elementos no pueden ser descendientes directos de table elementos, la forma en que sé hacer esto es aplicar las reglas de CSS que desea a cada tr elemento al que desea aplicarlo.

<table>
<tr><th>Test Table</th><tr>
<tr><td>123456789</td><tr>
<tr style="display: none; other-property: value;"><td>123456789</td><tr>
<tr style="display: none; other-property: value;"><td>123456789</td><tr>
<tr><td>123456789</td><tr>
<tr><td>123456789</td><tr>
</table>

Si tiene más de una regla de CSS para aplicar a las filas en cuestión, proporcione las filas correspondientes a class en su lugar, descargue las reglas a CSS externo.

<table>
<tr><th>Test Table</th><tr>
<tr><td>123456789</td><tr>
<tr class="something"><td>123456789</td><tr>
<tr class="something"><td>123456789</td><tr>
<tr><td>123456789</td><tr>
<tr><td>123456789</td><tr>
</table>

8
2017-08-02 10:08



Simplemente configure la pantalla: ninguna en los elementos que quiere ocultar:

<table>
<tr><th>Test Table</th><tr>
<tr style="display:none"><td>1. 123456789</td><tr>
<tr><td>2. 123456789</td><tr>
<tr><td>3. 123456789</td><tr>
</table>

5
2017-08-02 10:08



<style type="text/css">
.hidden { display:none; }
</style>

<table>
<tr><th>Test Table</th><tr>
<tr class="hidden"><td>123456789</td></tr>
<tr class="hidden"><td>123456789</td></tr>
<tr class="hidden"><td>123456789</td></tr>
</table>

Y en lugar de:

<div style="display:none;">
<table>...</table>
</div>

es mejor que uses:     ...


4
2017-08-02 10:07



Proporcione todas las filas que desee para ocultar un nombre de clase que pueda usar para ocultar. Use javascript para agregar / eliminar esta clase de las diferentes filas.

<table>
<tr><th>Test Table</th><tr>
<tr class="toHide"><td>123456789</td><tr>
<tr class="toHide"><td>123456789</td><tr>
<tr class="toHide"><td>123456789</td><tr>
</table>

CSS:

.toHide
{
 display: none;
}

3
2017-08-02 10:10



No se te permite tener div etiquetas entre tr etiquetas. Tienes que buscar otras estrategias como crear una clase de CSS con display: none y agregando esto a filas preocupantes o añadiendo estilo en línea display: none a las filas concernientes.

.hidden
{
  display:none;
}

<table>
  <tr><td>I am visible</td><tr>
  <tr class="hidden"><td>I am hidden using CSS class</td><tr>
  <tr class="hidden"><td>I am hidden using CSS class</td><tr>
  <tr class="hidden"><td>I am hidden using CSS class</td><tr>
  <tr class="hidden"><td>I am hidden using CSS class</td><tr>
</table>

o

<table>
  <tr><td>I am visible</td><tr>
  <tr style="display:none"><td>I am hidden using inline style</td><tr>
  <tr style="display:none"><td>I am hidden using inline style</td><tr>
  <tr style="display:none"><td>I am hidden using inline style</td><tr>
</table>

2
2018-06-13 09:22



Ajustar las secciones que desea ocultar en su propio tbody y mostrar / ocultar dinámicamente.


1
2017-11-18 09:35