Hide a column in a javascript populated table

Question

I would like to hide the entire age column on this table.

<table id="displayTable">
    <tr>
        <td class="Name"></td>
        <td class="Phone"></td>
        <td class="Age"></td>
    </tr>
</table>

Javascript follows to hide Age cell -

var table = document.getElementById('displayTable');
var tableRow = table.getElementsByTagName('tr');    

for (var row = 0; row < tableRow.length; row++) {
    var cells = tableRow[row].getElementsByTagName('td')
    cells[2].style.display='none';    
}

error says -

"2.style is null or not an object."

What am I missing?

Answer 1

Well, first of all, check your table id. You have it set to 'displayTable' but you're attempting to look it up by 'displayLossTable'.

When i fix that id, and plug your code into jsFiddle, everything works.

Answer 2

what does alert(cells[2]) give you? Alternatively you should try add/remove class instead of inline styles:

el.className+= 'hide'