Working : Dynamic table using jQuery

Allows user to expand or collapse column

by ajinkya_parakh

HTML

<table>
 <thead>
    <tr>
        <th>Lonnnnnng Header 1  <span><b>-</b></span></th>
        <th>Lonnnnnng Header 2  <span><b>-</b></span></th>
        <th>Lonnnnnng Header 3  <span><b>-</b></span></th>
     </tr>
 </thead>
 <tr>
     <td>row 1, cell 1</td>
     <td>row 1, cell 2</td>
     <td>row 1, cell 3</td>
 </tr>
 <tr>
     <td>row 2, cell 1</td>
     <td>row 2, cell 2</td>
     <td>row 2, cell 3</td>
 </tr>
 <tr>
     <td>row 3, cell 1</td>
     <td>row 3, cell 2</td>
     <td>row 3, cell 3</td>
 </tr>
 <tr>
     <td>row 4, cell 1</td>
     <td>row 4, cell 2</td>
     <td>row 4, cell 3</td>
 </tr>
 
 </table>

CSS

body { font-family: Sans-Serif; }

table { 
    width: 100%;
    border: solid 1px #888;
    border-collapse: collapse;
    table-layout: fixed;
}

table.collapsed {
    width: 0px;
}

th.collapsed
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 30px;
}
td.collapsed {
    overflow: hidden;
    white-space: nowrap;
    width: 30px;
}

table thead { background-color: #6E6E6E; color: #fff; }

table td, table th {
    padding: 5px;
    border: solid 1px #888;
}

.alt { background-color: #ddd; }    

.hover { background-color: #81DAF5; }

JavaScript

$(function() {
    // OPTIONAL : Adding some colours 
    $('table tbody tr:odd').addClass('alt');

    // OPTIONAL : changing row colour on hover
    $('table tbody tr').hover(function() {
        $(this).addClass('hover');
    }, function() {
        $(this).removeClass('hover');
    });
});

$('tr th').click(function() {
    // Get the index of clicked column
    var index = (this.cellIndex + 1);
    // Get all cells in that column
    var cells = $('table tr > :nth-child(' + index + ')');
    cells.toggleClass('collapsed');

    if ($(this).hasClass('collapsed')) {
        $(this).find('span').html('<b>+</b>');
    }
    else {
        $(this).find('span').html('<b>-</b>');
    }

    // Special case when all columns are collapsed
    if ($('table tr > th:not(.collapsed)').length)
        $('table').removeClass('collapsed');
    else
        $('table').addClass('collapsed');
});