How to hide specific HTML table column?

Asked Dec 08 '21 at 10:24

Active Dec 08 '21 at 11:18

Viewed 173 times

I have a dynamically made HTML table. I want to hide one of the columns with style.visibility = "hidden"

The cell i want to hide is provided with the needed ID, but when i do this my whole table disappears.

// get element ID & set to hidden
document.getElementById('wachtwoord')!.style.visibility = 'hidden'

// set ID of the cell & append to DOM
 Object.values(userData).forEach((userDataElement, columnIndex) => {
      // create element and textnode      
      let cell: HTMLTableDataCellElement = document.createElement("td");
      let textNode: Text = document.createTextNode(userDataElement as string);

      // append to DOM   
      cell.appendChild(textNode);
      row.appendChild(cell);
      table.appendChild(row);
      createTable!.appendChild(table);

      row.id = userData.id

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

How can i hide a specific table cell?

edited Dec 08 '21 at 11:18

asked Dec 08 '21 at 10:24

uuuuuuray

`HTMLElement.hidden = true` check [the docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden). – Jax-p Dec 08 '21 at 10:26
@Jax-p thanks for the input but still the whole table disappears – uuuuuuray Dec 08 '21 at 10:28
You may want to try `display: none;` attribute – Babis.amas Dec 08 '21 at 10:32
1

Why are you using the exclamatory mark `'!'` in your code written above? as far as I know, we don't use the exclamatory mark there. – Anil Parshi Dec 08 '21 at 10:33
@Babis.amas still the whole table disappears instead of column – uuuuuuray Dec 08 '21 at 10:39
@groovy_guy because i get an error the object is possibly null which isn't and with the ! you say it can't be null – uuuuuuray Dec 08 '21 at 10:40
@uuuuuuray are you sure you are targeting the proper element? – Babis.amas Dec 08 '21 at 10:43
1

@uuuuuuray this is not how we check a null element. check this [link](https://stackoverflow.com/a/5515349/15405352) for details – Anil Parshi Dec 08 '21 at 10:55
@Babis.amas yes unfortunately, otherwise the table wouldn't disappear at all i think – uuuuuuray Dec 08 '21 at 11:08
You should provide some code so that we can have a look at it. – Babis.amas Dec 08 '21 at 11:12
@Babis.amas i've editted the code – uuuuuuray Dec 08 '21 at 11:19
Are the row, table, createTable variables initialized previously? – Babis.amas Dec 08 '21 at 11:45

How to hide specific HTML table column?

0 Answers0