CODEWITHSUNDEEP
javascripthtmlhtml-tablehide
Eduardo Carazzatto
Eduardo Carazzatto

Reputation: 23

Hide a table column with Javascript

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?

Upvotes: 2

Views: 5884

Answers (2)

Ori Drori
Ori Drori

Reputation: 191976

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

Upvotes: 3

dzylich
dzylich

Reputation: 548

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.

Upvotes: 1

Related Questions