es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo ocultar una columna específica de una tabla HTML?

15 Jul, 2023 Programación

Tengo una tabla HTML creada dinámicamente. Quiero ocultar una de las columnas con style.visibility = “hidden”.

La celda que quiero ocultar tiene el ID necesario, pero cuando hago esto, toda mi tabla desaparece.

// obtener el ID del elemento y establecerlo como oculto
document.getElementById('wachtwoord')!.style.visibility = 'hidden';

// establecer el ID de la celda y agregar al DOM
Object.values(userData).forEach((userDataElement, columnIndex) => {
   // crear elemento y nodo de texto
   let cell: HTMLTableDataCellElement = document.createElement("td");
   let textNode: Text = document.createTextNode(userDataElement as string);

   // agregar al DOM
   cell.appendChild(textNode);
   row.appendChild(cell);
   table.appendChild(row);
   createTable!.appendChild(table);

   row.id = userData.id;

   if (columnIndex === 3) {
      cell.id = "wachtwoord";
   };
});

¿Cómo puedo ocultar una celda específica de una tabla?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para ocultar una celda específica de una tabla sin hacer que desaparezca toda la tabla, puedes agregar una clase de CSS a la celda y usar la clase para ocultarla utilizando la propiedad style.display en lugar de la visibilidad.

    Aquí tienes un ejemplo de código actualizado:

    // establecer el ID de la celda y agregar al DOM
Object.values(userData).forEach((userDataElement, columnIndex) => {
  // crear elemento y nodo de texto
  let cell: HTMLTableDataCellElement = document.createElement("td");
  let textNode: Text = document.createTextNode(userDataElement as string);

  // agregar al DOM
  cell.appendChild(textNode);
  row.appendChild(cell);
  table.appendChild(row);
  createTable!.appendChild(table);

  row.id = userData.id;

  // agregar una clase de CSS a la celda que se ocultará
  if (columnIndex === 3) {
    cell.classList.add("hidden-cell");
  };
});

// CSS para la clase oculta
.hidden-cell {
  display: none;
}

    De esta manera, puedes ocultar la celda específica sin afectar la visibilidad de toda la tabla.

Comments are closed.