Table toggle columns

by karin

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<table id="testTable" border="1">
    <thead>
        <tr>
            <th>2014</th>
            <th>low</th>
            <th>high</th>
            <th data-columns="4"><i class="fa fa-plus"></i><i class="fa fa-minus"></i>

            </th>
            <th>%</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </tbody>
</table>

CSS

tbody tr td:nth-child(2), tbody tr td:nth-child(3) {
  
}
.highlow {
    background: none repeat scroll 0 0 #e8f2fc;
    color: #555;
    font-style: italic;
    width: 45px;
}

JavaScript

var cell = $("[data-columns]");
$('.fa-plus').hide();
cell.on("click", function () {
    var col = $(this).attr('data-columns');
    col = parseInt(col);
    var high = parseInt(col) - 1;
    var low = parseInt(col) - 2;
    
    $('.fa-minus,.fa-plus').toggle();
    $('#testTable tbody tr td:nth-child(' + high + '),#testTable tbody tr td:nth-child(' + low + ')').addClass("highlow");
    
    $('#testTable tbody tr td:nth-child(' + high + '), #testTable thead tr th:nth-child(' + high + ')').toggle();
    $('#testTable tbody tr td:nth-child(' + low + '), #testTable thead tr th:nth-child(' + low + ')').toggle();
})