I would like to put data as shown below into Cell(2) but hidden and only using pure JS

for(var i = 0;  i < obj.features.length; i++) {
    var featureTitle = obj.features[i].properties.title;
    var featureHab = obj.features[i].properties.Broad_Habi;

    var table = document.getElementById("myTableData");

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    row.insertCell(0).innerHTML= '<a href="#" class="myButtonView" onClick="Javacsript:deleteRow(this)">?</a>';
    row.insertCell(1).innerHTML= '<a href="#" class="myButtonDelete" onClick="Javacsript:deleteRow(this)">X</a>';
    row.insertCell(2).innerHTML= featureTitle;
    row.insertCell(3).innerHTML= featureHab;
}

I would like to put data as shown below into Cell(2) but hidden and only using pure JS

for(var i = 0;  i < obj.features.length; i++) {
    var featureTitle = obj.features[i].properties.title;
    var featureHab = obj.features[i].properties.Broad_Habi;

    var table = document.getElementById("myTableData");

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    row.insertCell(0).innerHTML= '<a href="#" class="myButtonView" onClick="Javacsript:deleteRow(this)">?</a>';
    row.insertCell(1).innerHTML= '<a href="#" class="myButtonDelete" onClick="Javacsript:deleteRow(this)">X</a>';
    row.insertCell(2).innerHTML= featureTitle;
    row.insertCell(3).innerHTML= featureHab;
}

• javascript
• html
• html-table

• Why in pure JS? In jQuery you can use : w3schools./jquery/jquery_hide_show.asp – aGer Commented Jan 27, 2016 at 23:20
• @aGer Yes i saw many JQuery solutions but i am totally new to this so i have now idear have to add jQuery to my code above if you can help me with this that would be awesome – Ben Commented Jan 27, 2016 at 23:36
• @aGer Why suggest jQuery? It's not the cure to everything and it's good to understand what jQuery is doing under the hood, i.e., how to write vanilla JS. – Mike Cluck Commented Jan 27, 2016 at 23:52
• KISS = Keep it simple and smart. – aGer Commented Jan 27, 2016 at 23:54

2 Answers 2

There are multiple solutions for this

In JavaScript, it's as simple as using visibility-hidden.

var tableCel = document.querySelector('td')[2];
tableCell.style.visibility = 'hidden';

If you later want to show the table cell, you simply change the value of the property.

tableCell.style.visibility = 'visible';

In jQuery, there are a couple of ways

$("td:eq(2)").hide();

Or

$("td:eq(2)").css({ "visibility": "hidden" });

I think you want to hide on clicking of deleteRow which can be possible like this

function deleteRow(rowyouwanttohide)
{
    rowyouwanttohide.style.visibility = 'hidden'; 
    //or you can go to display none like below
    rowyouwanttohide.style.display= 'none'; 
}