Hide a table column with Javascript

Question

I have the following table:

<table id="btt-ranges" cellspacing="0" cellpadding="0" border="0" 
    <tbody>
        <tr>
            <th scope="col"> </th>
            <th id="Business" scope="col">Type of Business</th>
            <th id="Ranges" scope="col"> Ranges</th>
            <th scope="col">BTT</th>
        </tr>
        <tr>
            <td>Example</td>
            <td>Example</td>
            <td>Example</td>
            <td>Example</td>
        </tr>
        <tr>
            <td>Example</td>
            <td>Example</td>
            <td>Example</td>
            <td>Example</td>
        </tr>
        <tr>
            <td>Example</td>
            <td>Example</td>
            <td>Example</td>
            <td>Example</td>
        </tr>
    </tbody>
</table>

What I have to do is hide the last column, but I can't change how the table is right now. I can use Javascript and so far this is what I tried:

function show_hide_column() {
    var tbl = document.getElementById('btt-changes');
    var rows = tbl.getElementsByTagName('tr');

    for (var row = 0; row < rows.length; row++) {
        var cols = rows[row].children;
        console.log(1, cols.length);
        if (4 >= 0 && 4 < cols.length) {
            var cell = cols[4];
            console.log(cell, cell.tagName);
            if (cell.tagName == 'TD') cell.style.display = 'none';
        }
    }
}

What can I do without touching the table?

You can use css selector to select the last td like using "td:last-child" — hello_harry
– hello_harry, Commented Sep 4, 2015 at 20:20
You can replace some expressions by boolean value. For example 4 >= 0 you can replace by true. 4 is everytime more (or equal) than 0. — Misaz
– Misaz, Commented Sep 4, 2015 at 20:25

Ori Drori · Accepted Answer · 2018-11-06 19:47:38Z

3

This code selects the col's cells (th and tds), and then hides them (fiddle):

var lastColHeader = Array.prototype.slice.call(document.querySelectorAll('th:last-child', '#btt-ranges'), 0); // get the header cell
var lastColCells = Array.prototype.slice.call(document.querySelectorAll('td:last-child', '#btt-ranges'), 0).concat(lastColHeader); // get the column cells, and add header

lastColCells.forEach(function(cell) { // iterate and hide
    cell.style.display = 'none';
});

edited Nov 6, 2018 at 19:47

answered Sep 4, 2015 at 20:34

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eduardo Carazzatto Over a year ago

Thanks for your help and patience, I'm new to all this :)

dzylich · Accepted Answer · 2015-09-04 20:28:37Z

1

You don't need to use javascript for this. You can use a CSS selector to hide the last column:

#btt-ranges tr td:last-child { display: none; }

Edit: Just realized you specifically need to do it in javascript. Not sure if there is any way to append a style without touching the table.

answered Sep 4, 2015 at 20:28

dzylich

5482 silver badges18 bronze badges

2 Comments

Eduardo Carazzatto Over a year ago

Yeah, only Javascript, but thans for your support :)

Lonnie Best Over a year ago

Your answer was very helpful to me. Glad you posted it.

Collectives™ on Stack Overflow

Hide a table column with Javascript

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related