Hide Table Column

by zuhloobie

HTML

<table id="table">
    <thead>
        <tr>
            <th>COL1</th>
            <th>COL2</th>
            <th>COL3</th>
            <th class="hidethcol4">COL4</th>
            <th>COL5</th>
            <th>COL6</th>
        </tr>
    </thead>
    <tbody>
        <tr id="row" class="blah1 blah2">
            <td class="cell yup" data-th="COL1">
                <img src="http://dummyimage.com/50x50/999/000.png">
            </td>
            <td class="" data-th="COL2">text 1-1</td>
            <td class="" data-th="COL3">
                <img src="http://dummyimage.com/50x50/666/000.png">
            </td>
            <td class="hidetdcol4" data-th="COL4"></td>
            <td class="" data-th="COL5">text 1-2</td>
            <td class="" data-th="REGISTER">
                <img src="http://dummyimage.com/50x50/F00/000.png">
            </td>
        </tr>
        <tr id="row" class="blah1">
            <td class="cell" data-th="COL1">
                <img src="http://dummyimage.com/50x50/999/000.png">
            </td>
            <td class="" data-th="COL2">text 2-1</td>
            <td class="" data-th="COL3">
                <img src="http://dummyimage.com/50x50/333/000.png">
            </td>
            <td class="" data-th="COL4">
                <img src="http://dummyimage.com/50x50/00c8ff/000.png">
            </td>
            <td class="" data-th="COL5">text 2-2</td>
            <td class="" data-th="COL6">
                <img src="http://dummyimage.com/50x50/F00/000.png">
            </td>
        </tr>
    </tbody>
</table>

CSS

@import url('http://fonts.googleapis.com/css?family=Open+Sans');
 table {
    border:1px solid #CCC;
    border-collapse:collapse;
    font-family:'Open Sans', sans-serif;
}
th {
    text-align:center;
    padding:5px;
    color:#999;
    font-size:14px;
    border-bottom:1px solid #CCC;
}
tr {
    border-bottom:1px solid #CCC;
}
td {
    text-align:center;
    font-size:12px;
    padding:5px;
}
td img {
    margin:0 auto;
    display:table-cell;
    vertical-align:middle;
}
.cell {display:none;}

JavaScript

// I want to hide all of column 4 if class blah2 is present

if ($('#row').is('.blah1.blah2')) {
    $('.cell').show();
    $('th:nth-child(3)').hide();
    $('td:nth-child(3)').hide();
};