2

Tengo una tabla dinámica obtenida de una función $.ajax() y una consulta SQL en PHP y lo que deseo es ocultar ciertas columnas para eso pense en crear un JSON con los indices de columna a ocultar

columnas ocultas =[{
                      tabla1:[0,3,5],
                      tabla2:[1,4],
                      tabla3:[0,4,7]
                  }]

En mi JSON tengo varias arreglos, ya que mediante una comparación switch utilizare el arreglo correspondiente para la tabla, en este caso sera el tabla1

<table>
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
            <th>6</th>
            <th>7</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>dato 1</td>
            <td>dato 2</td>
            <td>dato 3</td>
            <td>dato 4</td>
            <td>dato 5</td>
            <td>dato 6</td>
            <td>dato 7</td>
        </tr>
        <tr>
            <td>dato 1</td>
            <td>dato 2</td>
            <td>dato 3</td>
            <td>dato 4</td>
            <td>dato 5</td>
            <td>dato 6</td>
            <td>dato 7</td>
        </tr>
        <tr>
            <td>dato 1</td>
            <td>dato 2</td>
            <td>dato 3</td>
            <td>dato 4</td>
            <td>dato 5</td>
            <td>dato 6</td>
            <td>dato 7</td>
        </tr>
        <tr>
            <td>dato 1</td>
            <td>dato 2</td>
            <td>dato 3</td>
            <td>dato 4</td>
            <td>dato 5</td>
            <td>dato 6</td>
            <td>dato 7</td>
        </tr>
        <tr>
            <td>dato 1</td>
            <td>dato 2</td>
            <td>dato 3</td>
            <td>dato 4</td>
            <td>dato 5</td>
            <td>dato 6</td>
            <td>dato 7</td>
        </tr>
        <tr>
            <td>dato 1</td>
            <td>dato 2</td>
            <td>dato 3</td>
            <td>dato 4</td>
            <td>dato 5</td>
            <td>dato 6</td>
            <td>dato 7</td>
        </tr>
        <tr>
            <td>dato 1</td>
            <td>dato 2</td>
            <td>dato 3</td>
            <td>dato 4</td>
            <td>dato 5</td>
            <td>dato 6</td>
            <td>dato 7</td>
        </tr>
        <tr>
            <td>dato 1</td>
            <td>dato 2</td>
            <td>dato 3</td>
            <td>dato 4</td>
            <td>dato 5</td>
            <td>dato 6</td>
            <td>dato 7</td>
        </tr>
        <tr>
            <td>dato 1</td>
            <td>dato 2</td>
            <td>dato 3</td>
            <td>dato 4</td>
            <td>dato 5</td>
            <td>dato 6</td>
            <td>dato 7</td>
        </tr>
        <tr>
            <td>dato 1</td>
            <td>dato 2</td>
            <td>dato 3</td>
            <td>dato 4</td>
            <td>dato 5</td>
            <td>dato 6</td>
            <td>dato 7</td>
        </tr>
    </tbody>
</table>

Deseo ocultar los datos que servirán de indices del elemento ocultas.tabla1 en mi tabla html.

pensé utilizar querySelectAll(), en el thead no tengo problema para obtener el resultado deseado, pero en el tbody, sí, ya que al obtener tbodyParent.querySelectAll("tr>td")obtengo toda la colección de nodes pero sin diferenciar posiciones, es aqui donde tengo el problema para ocultar las columnas.

1 respuesta 1

0

Una forma sencilla es generando un CSS que aplique al número de columna por :nth-child(), y así las esconda.

Por ejemplo, para ocultar la columna 3, el CSS generado sería:

table>thead>tr>th:nth-of-type(3),
table>tbody>tr>td:nth-of-type(3){
    display: none;
}

Incluso podemos generar todo el CSS dinámicamente, concatenando el texto que oculta únicamente a las columnas que quieras.

Código

const columnas_ocultas = {
        tabla1: [0, 3, 5],
        tabla2: [1, 4],
        tabla3: [0, 4, 7]
      },
      head = document.head || document.getElementsByTagName('head')[0],
      estilos = document.createElement('style');

head.appendChild(estilos);


function estiloTabla(tablaElegida) {
  //generar nuevo estilo a partir de tabla1/tabla2/tabla3
  let nuevoEstilo = '';

  for (let esconderColumna of tablaElegida) { //valores del array
    nuevoEstilo += 'table>thead>tr>th:nth-child(' 
      + (esconderColumna + 1)
      + '),table>tbody>tr>td:nth-child(' 
      + (esconderColumna + 1)
      + ') {display: none}';//ocultar esa columna
  }

  estilos.innerHTML = nuevoEstilo;
}
table {border-collapse: collapse;}
td, th {border: 1px solid;}
<h5>Elegir estilo</h5>
<!-- Como ejemplo para probar llamar a la función -->
<input type=button value="estiloTabla(columnas_ocultas.tabla1)" onclick="estiloTabla(columnas_ocultas.tabla1)"><br>
<input type=button value="estiloTabla(columnas_ocultas.tabla2)" onclick="estiloTabla(columnas_ocultas.tabla2)"><br>
<input type=button value="estiloTabla(columnas_ocultas.tabla3)" onclick="estiloTabla(columnas_ocultas.tabla3)">

<h5>Tabla</h5>
<table>
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
            <th>6</th>
            <th>7</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>dato 1</td>
            <td>dato 2</td>
            <td>dato 3</td>
            <td>dato 4</td>
            <td>dato 5</td>
            <td>dato 6</td>
            <td>dato 7</td>
        </tr>
        <tr>
            <td>dato 1</td>
            <td>dato 2</td>
            <td>dato 3</td>
            <td>dato 4</td>
            <td>dato 5</td>
            <td>dato 6</td>
            <td>dato 7</td>
        </tr>
        <tr>
            <td>dato 1</td>
            <td>dato 2</td>
            <td>dato 3</td>
            <td>dato 4</td>
            <td>dato 5</td>
            <td>dato 6</td>
            <td>dato 7</td>
        </tr>
        <tr>
            <td>dato 1</td>
            <td>dato 2</td>
            <td>dato 3</td>
            <td>dato 4</td>
            <td>dato 5</td>
            <td>dato 6</td>
            <td>dato 7</td>
        </tr>
        <tr>
            <td>dato 1</td>
            <td>dato 2</td>
            <td>dato 3</td>
            <td>dato 4</td>
            <td>dato 5</td>
            <td>dato 6</td>
            <td>dato 7</td>
        </tr>
        <tr>
            <td>dato 1</td>
            <td>dato 2</td>
            <td>dato 3</td>
            <td>dato 4</td>
            <td>dato 5</td>
            <td>dato 6</td>
            <td>dato 7</td>
        </tr>
        <tr>
            <td>dato 1</td>
            <td>dato 2</td>
            <td>dato 3</td>
            <td>dato 4</td>
            <td>dato 5</td>
            <td>dato 6</td>
            <td>dato 7</td>
        </tr>
        <tr>
            <td>dato 1</td>
            <td>dato 2</td>
            <td>dato 3</td>
            <td>dato 4</td>
            <td>dato 5</td>
            <td>dato 6</td>
            <td>dato 7</td>
        </tr>
        <tr>
            <td>dato 1</td>
            <td>dato 2</td>
            <td>dato 3</td>
            <td>dato 4</td>
            <td>dato 5</td>
            <td>dato 6</td>
            <td>dato 7</td>
        </tr>
        <tr>
            <td>dato 1</td>
            <td>dato 2</td>
            <td>dato 3</td>
            <td>dato 4</td>
            <td>dato 5</td>
            <td>dato 6</td>
            <td>dato 7</td>
        </tr>
    </tbody>
</table>

2
  • Serviría para la reutilizacion de código, es decir como tengo muchas tablas que hacen lo mismo, pero de diferente tamaño es por eso que deseo cargar todos los datos y ocultar ciertas columnas dependiendo de la tabla a utilizar y mi consulta sql es similar, es el mismo código para diferentes tablas el 1 oct. 2020 a las 5:47
  • Quizás no haya quedado claro, pero este código es exactamente eso: reutilizable en cualquier cantidad de columnas, o incluso si se quiere alternar diferentes vistas (columnas que se muestran/ocultan dinámicamente) de la misma tabla
    – Pollo
    el 1 oct. 2020 a las 22:19

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.