CODEWITHSUNDEEP
javascripthtmldom
Evgenij Reznik
Evgenij Reznik

Reputation: 18594

Make entire column disappear

How can I make the left column in a table disappear using plain JS?

This is my approach:

<table id="tab" border="1">
    <tr>
        <td>abc</td>
        <td>def</td>
    </tr>
    <tr>
        <td>ghi</td>
        <td>jkl</td>
    </tr>
    <tr>
        <td>mno</td>
        <td>pqr</td>
    </tr>
</table>

<button onclick="inv()">invisible</button>
<button onclick="vis()">visible</button>

<script>
var tab, td;
window.onload = function() {
    tab = document.getElementById("tab");
    td = tab.getElementsByTagName("td");
}

function inv() {
    for (i = 0; i < td.length; i++) {
        td[i].style.display = "none";
        i++;
    }
}

function vis() {
    for (i = 0; i < td.length; i++) {
        td[i].style.display = "block";
        i++;
    }
}
</script>

It works, but I have to use "ugly" loops.
Maybe there is a more efficient way by just saying column[0].display = "none".

Here is the fiddle.

Upvotes: 6

Views: 955

Answers (4)

Tushar
Tushar

Reputation: 87203

Take advantage of CSS hierarchy and nth-child selectors.

Use selector tr td:nth-child(1) to select all the first column td elements.

JSfiddle

var tab;
// Use DOMContentLoaded instead of load event
document.addEventListener('DOMContentLoaded', function() {
  tab = document.getElementById('tab');
});

function inv() {
  tab.classList.add('hide');
}

function vis() {
  tab.classList.remove('hide');
}
.hide tr td:nth-child(1) {
  display: none;
}
<table id="tab" border="1">
  <tr>
    <td>abc</td>
    <td>def</td>
  </tr>
  <tr>
    <td>ghi</td>
    <td>jkl</td>
  </tr>
  <tr>
    <td>mno</td>
    <td>pqr</td>
  </tr>
</table>
<button onclick="inv()">invisible</button>
<button onclick="vis()">visible</button>

Demo using toggle with single button.

function toggle() {
  document.getElementById('tab').classList.toggle('hide');
}
.hide tr td:nth-child(1) {
  display: none;
}
<table id="tab" border="1">
  <tr>
    <td>abc</td>
    <td>def</td>
  </tr>
  <tr>
    <td>ghi</td>
    <td>jkl</td>
  </tr>
  <tr>
    <td>mno</td>
    <td>pqr</td>
  </tr>
</table>
<button onclick="toggle()">Toggle</button>

Upvotes: 5

Adwaenyth
Adwaenyth

Reputation: 2110

Use the row tags to get to your cells to hide/show them. That way you can specify an index for the row as all cells are direct children of their row.

var tab, td;
window.onload = function () {
    tab = document.getElementById("tab");
    tr = tab.getElementsByTagName("tr");

}

function inv() {
    for (i = 0; i < td.length; i++) {
        tr[i].children[0].style.display = "none";
    }
}

function vis() {
    for (i = 0; i < td.length; i++) {
        tr[i].children[0].style.display = "block";
    }
}

Upvotes: 0

sahbeewah
sahbeewah

Reputation: 2690

The most efficient solution would be to inject and remove a stylesheet and let the browser do the work.

Fiddle: https://jsfiddle.net/4L4h7ea1/2/

var tab, td;

var hideFirstColumnCss = document.createElement('style');
hideFirstColumnCss.setAttribute('id', 'hideCssStyle');
hideFirstColumnCss.innerHTML = '#tab td:first-child { display: none; }';
window.onload = function () {
    tab = document.getElementById("tab");
    td = tab.getElementsByTagName("td");

}

function inv() {
    document.head.appendChild(hideFirstColumnCss);
}

function vis() {
    var style = document.getElementById('hideCssStyle');
    style.parentNode.removeChild(style);
}

Upvotes: 0

Axel Amthor
Axel Amthor

Reputation: 11096

By the use of some empty css classes and jQuery, you are able to achieve that in a one-liner:

<table id="tab" border="1">
    <tr>
        <td class="col1">abc</td>
        <td class="col2">def</td>
    </tr>
    <tr>
        <td class="col1">ghi</td>
        <td class="col2">jkl</td>
    </tr>
    <tr >
        <td class="col1">mno</td>
        <td class="col2">pqr</td>
    </tr>
</table>

now you can just do:

 jQuery(".col1").hide();

(mind the selector with a dot before the class name)

Upvotes: 0

Related Questions