How can i hide a table header Column

Question

I have an HTML table having input field inside, My table consist of 4 columns from which i need to show only 3 on UI the fourth column is for some other work that's why i don't wanna show it on UI

Here in my code i have four columns Item Code Item Name Selling Price and quantity
I am trying to hide Selling Price column as header
i have already hide the body part,but facing issues while hiding the header

var tableData = [{
    "Item Code": "1001",
    "Item Name": "Beverages",
    "Selling Price": "65",
    "Quantity": "12"

  },
  {
    "Item Code": "2003",
    "Item Name": "Juices",
    "Selling Price": "75",
    "Quantity": "14"
  },
  {
    "Item Code": "1004",
    "Item Name": "Soups",
    "Selling Price": "689",
    "Quantity": "15"

  },
  {
    "Item Code": "2005",
    "Item Name": "Cookies",
    "Selling Price": "74",
    "Quantity": "17"

  },

]

function addTable(tableData) {
  var col = Object.keys(tableData[0]);
  var countNum = col.filter(i => !isNaN(i)).length;
  var num = col.splice(0, countNum);
  col = col.concat(num);
  var table = document.createElement("table");
  var tr = table.insertRow(-1); // TABLE ROW.
  for (var i = 0; i < col.length; i++) {
    var th = document.createElement("th"); // TABLE HEADER.
    th.innerHTML = col[i];
    tr.appendChild(th);
    tr.classList.add("text-center");
    tr.classList.add("head")
  }
  for (var i = 0; i < tableData.length; i++) {
    tr = table.insertRow(-1);
    for (var j = 0; j < col.length; j++) {
      let tabCell = tr.insertCell(-1);
      var hiddenField = document.createElement("input");
      hiddenField.style.display = "none";
      var tabledata = tableData[i][col[j]];

      if (tableData[i]['Item Code'] === tableData[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Code');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData[i]['Item Name'] === tableData[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Name');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData[i]['Selling Price'] === tableData[i][col[j]]) {
        /*  tabCell.innerHTML = tabledata; */ //here i am hiding the selling price in body
        hiddenField.setAttribute('name', 'sellingPrice');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData[i]['Quantity'] === tableData[i][col[j]]) {
        var quantityField = document.createElement("input");
        quantityField.style.border = "none";
        quantityField.style["text-align"] = "center";
        quantityField.setAttribute('name', 'Quantity');
        quantityField.setAttribute('value', tabledata);
        quantityField.setAttribute('type', 'number');
        quantityField.classList.add("dataReset");
        tabCell.appendChild(quantityField);
        /* console.log(quantityField) */
      }
      if (j > 1)
        tabCell.classList.add("text-right");
    }
  }
  var divContainer = document.getElementById("HourlysalesSummary");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");
}
addTable(tableData);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<table class="w-100" id=HourlysalesSummary></table>

Łukasz Blaszyński · Accepted Answer · 2019-01-16T11:45:31.807

Solution without css: You can use this line to remove elements from DOM:

table.rows[i].removeChild(childNode);

or:

childNode.style = 'display: none'

to keep elements but not displayed.

var tableData = [{
    "Item Code": "1001",
    "Item Name": "Beverages",
    "Selling Price": "65",
    "Quantity": "12"

  },
  {
    "Item Code": "2003",
    "Item Name": "Juices",
    "Selling Price": "75",
    "Quantity": "14"
  },
  {
    "Item Code": "1004",
    "Item Name": "Soups",
    "Selling Price": "689",
    "Quantity": "15"

  },
  {
    "Item Code": "2005",
    "Item Name": "Cookies",
    "Selling Price": "74",
    "Quantity": "17"

  },

]

function addTable(tableData) {
  var col = Object.keys(tableData[0]);
  var countNum = col.filter(i => !isNaN(i)).length;
  var num = col.splice(0, countNum);
  col = col.concat(num);
  var table = document.createElement("table");
  var tr = table.insertRow(-1); // TABLE ROW.
  for (var i = 0; i < col.length; i++) {
    var th = document.createElement("th"); // TABLE HEADER.
    th.innerHTML = col[i];
    tr.appendChild(th);
    tr.classList.add("text-center");
    tr.classList.add("head")
  }
  for (var i = 0; i < tableData.length; i++) {
    tr = table.insertRow(-1);
    for (var j = 0; j < col.length; j++) {
      let tabCell = tr.insertCell(-1);
      var hiddenField = document.createElement("input");
      hiddenField.style.display = "none";
      var tabledata = tableData[i][col[j]];

      if (tableData[i]['Item Code'] === tableData[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Code');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData[i]['Item Name'] === tableData[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Name');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData[i]['Selling Price'] === tableData[i][col[j]]) {
        /*  tabCell.innerHTML = tabledata; */ //here i am hiding the selling price in body
        hiddenField.setAttribute('name', 'sellingPrice');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData[i]['Quantity'] === tableData[i][col[j]]) {
        var quantityField = document.createElement("input");
        quantityField.style.border = "none";
        quantityField.style["text-align"] = "center";
        quantityField.setAttribute('name', 'Quantity');
        quantityField.setAttribute('value', tabledata);
        quantityField.setAttribute('type', 'number');
        quantityField.classList.add("dataReset");
        tabCell.appendChild(quantityField);
        /* console.log(quantityField) */
      }
      if (j > 1)
        tabCell.classList.add("text-right");
    }
  }
  var divContainer = document.getElementById("HourlysalesSummary");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");
  hideColumn(table, 3)
}
addTable(tableData);

function hideColumn(table, index) {
  for(var i=0;i<table.rows.length;i++){
     const childNode = table.rows[i].childNodes[index - 1];
     //childNode.style = 'display: none'
     table.rows[i].removeChild(childNode);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<table class="w-100" id=HourlysalesSummary></table>

Solution using css:

table tr th:nth-child(3),
table tr td:nth-child(3){
 display: none;
}

I can use this css but i wanted to do it with javaScript as i am hiding my table body part with javascript,what if in future the column place gets change from 3 to 5 or any thing — manish thakur, Jan 16 '19 at 11:25
@manishthakurI have i updated a solution to have it working without css. Simple removing not needed column — Łukasz Blaszyński, Jan 16 '19 at 11:40
@manishthakur see my updated answer, now there are 3 methods: removing DOM element, hiding using js and hiding using css. Choose the one most fit your needs. — Łukasz Blaszyński, Jan 16 '19 at 11:47
hey sir can you please help me out on this post https://stackoverflow.com/questions/55919420/how-to-make-html-table-expand-on-click/55989047?noredirect=1#comment98645885_55989047 ..i am stuck here from long time — manish thakur, May 06 '19 at 07:17
Hey could you please help me out with some approach on https://stackoverflow.com/questions/63814645/how-to-create-dynamic-elements-inside-global-tabs I am stuck here from long time — manish thakur, Sep 09 '20 at 18:37

score 0 · Answer 2 · answered Jan 16 '19 at 11:17

You can do it using css

td:nth-child(3),th:nth-child(3){
  display: none;
}

var tableData = [{
    "Item Code": "1001",
    "Item Name": "Beverages",
    "Selling Price": "65",
    "Quantity": "12"

  },
  {
    "Item Code": "2003",
    "Item Name": "Juices",
    "Selling Price": "75",
    "Quantity": "14"
  },
  {
    "Item Code": "1004",
    "Item Name": "Soups",
    "Selling Price": "689",
    "Quantity": "15"

  },
  {
    "Item Code": "2005",
    "Item Name": "Cookies",
    "Selling Price": "74",
    "Quantity": "17"

  },

]

function addTable(tableData) {
  var col = Object.keys(tableData[0]);
  var countNum = col.filter(i => !isNaN(i)).length;
  var num = col.splice(0, countNum);
  col = col.concat(num);
  var table = document.createElement("table");
  var tr = table.insertRow(-1); // TABLE ROW.
  for (var i = 0; i < col.length; i++) {
    var th = document.createElement("th"); // TABLE HEADER.
    th.innerHTML = col[i];
    tr.appendChild(th);
    tr.classList.add("text-center");
    tr.classList.add("head")
  }
  for (var i = 0; i < tableData.length; i++) {
    tr = table.insertRow(-1);
    for (var j = 0; j < col.length; j++) {
      let tabCell = tr.insertCell(-1);
      var hiddenField = document.createElement("input");
      hiddenField.style.display = "none";
      var tabledata = tableData[i][col[j]];

      if (tableData[i]['Item Code'] === tableData[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Code');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData[i]['Item Name'] === tableData[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Name');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData[i]['Selling Price'] === tableData[i][col[j]]) {
        /*  tabCell.innerHTML = tabledata; */ //here i am hiding the selling price in body
        hiddenField.setAttribute('name', 'sellingPrice');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData[i]['Quantity'] === tableData[i][col[j]]) {
        var quantityField = document.createElement("input");
        quantityField.style.border = "none";
        quantityField.style["text-align"] = "center";
        quantityField.setAttribute('name', 'Quantity');
        quantityField.setAttribute('value', tabledata);
        quantityField.setAttribute('type', 'number');
        quantityField.classList.add("dataReset");
        tabCell.appendChild(quantityField);
        /* console.log(quantityField) */
      }
      if (j > 1)
        tabCell.classList.add("text-right");
    }
  }
  var divContainer = document.getElementById("HourlysalesSummary");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");
}
addTable(tableData);

td:nth-child(3),
th:nth-child(3) {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<table class="w-100" id=HourlysalesSummary></table>

hey sir can you please help me out in this post please https://stackoverflow.com/questions/55919420/how-to-make-html-table-expand-on-click/55989047?noredirect=1#comment98645885_55989047 — manish thakur, May 06 '19 at 07:20

score 0 · Answer 3 · answered Jan 16 '19 at 11:48

You're already including JQuery, why not utilise that -

$('#HourlysalesSummary td:nth-child(' + idx + '),#HourlysalesSummary th:nth-child(' + idx + ')').hide();

You can just replace the idx with the column index. Column index will be starting from 1. This code will hide columns both header and data rows.

And to show a column, just use .show() instead of .hide()

$('#HourlysalesSummary td:nth-child(' + idx + '),#HourlysalesSummary th:nth-child(' + idx + ')').show();

This will just hide the columns, and not remove from DOM, so you will still be able to use the data in case you want to use for any other purpose.

How can i hide a table header Column

3 Answers3