Reputation: 820

How can i hide a table header Column

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>

Upvotes: 0

Answers (3)

Ravi Kumar Gupta

Reputation: 1798

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.

Upvotes: 0

Łukasz Blaszyński

Reputation: 1565

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;
}

Upvotes: 1

brk

Reputation: 50326

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>

Upvotes: 0

How can i hide a table header Column

Answers (3)

Related Questions