CODEWITHSUNDEEP
javascripthtmlhtml-table
Ben
Ben

Reputation: 69

How can I hide a cell of a table with javascript

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

Upvotes: 1

Views: 9277

Answers (2)

varad mayee
varad mayee

Reputation: 619

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

Upvotes: 1

Richard Hamilton
Richard Hamilton

Reputation: 26444

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

Upvotes: 3

Related Questions