ANCS TPS Tables

by lukerichison

HTML

<script src="http://mottie.github.io/tablesorter/js/jquery.tablesorter.min.js"></script>
<div class="table">
    <h2>Projects</h2>
    <div class="table-wrap"><table>
        <thead>
            <tr>
                <th rowspan="2" title="Click to sort">Prgress</th>
                <th rowspan="2" title="Click to sort">ID</th>
                <th rowspan="2" title="Click to sort" class="left-align">Department</th>
                <th rowspan="2" title="Click to sort" class="left-align" width="99%">Title</th>
                <th colspan="3">Dates</th>
                <th colspan="2">Hours</th>
            </tr>
            <tr>
                <th title="Click to sort">assigned</th>
                <th title="Click to sort">due</th>
                <th title="Click to sort">complete</th>
                <th title="Click to sort">estimate</th>
                <th title="Click to sort">to date</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2"><div class="progress" data-progress="60%">60%<div></div></div></td>
                <td rowspan="2">5486</td>
                <td class="left-align">Development</td>
                <td class="left-align">Cityview</td>
                <td>08/07/2013</td>
                <td>12/31/2013</td>
                <td></td>
                <td>42.00</td>
                <td>36.00</td>
            </tr>
            <tr><td colspan="9"><div class="table-wrap"><table>
                <thead>
                    <tr>
                        <td>Nested</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>nested body</td>
                    </tr>
                </tbody>
            </table></div></td></tr>
            <tr>
                <td rowspan="2"><div class="progress" data-progress="85%">85%<div></div></div></td>
                <td rowspan="2">5487</td>
                <td...

CSS

body { font: 1em/1.5 'Source Sans Pro', sans-serif;}
div.table {background-color: #555560; padding-bottom: 4px; border: 1px solid #333340; border-width: 1px 0; border-radius: 4px;}
div.table h2 { color: #fff; text-shadow: 1px 2px #333340; font-size: 2em; margin: 0 0.25em;}
.table-wrap { display: none; }
div.table table { width: 100%; border-spacing: 0; border: 1px solid #D2D5D8; border-collapse:collapse; color: #555560;}
div.table thead {background-color: #F2F2F2;}
div.table thead th {vertical-align: bottom; font-weight: 600; white-space: nowrap;}
div.table thead th[title] {cursor: pointer;}
div.table thead th[title]:hover {background-color: #E2E2E2;}
div.table thead tr:nth-child(2) th {font-size: 0.75em; padding-top: 0; padding-bottom: 0;}
div.table tbody {background-color: #FFF; font-size: 0.875em; font-weight: 100;}
div.table tbody tr:nth-child(4n+1) {background-color: #F5FBFC;}
div.table tbody tr:nth-child(even) > td {display: none;}
div.table tbody tr:nth-child(odd) > td {vertical-align: top;}
div.table tbody tr:nth-child(odd):hover {background-color: #D9EAED;}
div.table th, div.table td {border: 1px solid #ccc;padding: 2px 0.5em; text-align: center;}
div.table .left-align {text-align: left;}

div.table div.progress {position: relative; top: 0.125em; background-color: #D2D5D8; border-radius: 4px; width: 6em; line-height: 1.25; font-weight: 600;text-shadow: 0 1px 1px #FFF;z-index: 1}
div.table div.progress div {position: absolute; left: 0; top: 0; height: 100%;border-radius: 4px; z-index: -1;
                                                   background-color: #79BDE2;}
div.table div.progress[data-progress="Upcoming"]  {background-color: #F9D5A0; color: #666670;}
div.table div.progress[data-progress="Holding"]   {background-color: #B4ADF7; color: #666670;}
div.table div.progress[data-progress="Waiting"]   {background-color: #E5A69C; color: #666670;}
div.table div.progress[data-progress="Complete"]  {background-color: #00ADEE; color: #FFF; text-shadow: 0 1px...

JavaScript

function getProgress(div){
   var divP = div.data('progress'),
       divI = parseInt(divP, 10);
    if (divI) { div.children('div').css('width', divI+'%');}
}
$('div.table').find('h2').click(function(){
    $(this).next('.table-wrap').slideToggle();
});
$('div.table')
    .find('table').tablesorter()
    .find('div.progress').each(function(){
        getProgress($(this));
    })
;
$('tr:nth-child(odd)').click(function(){
    $(this).next('tr')
        .children('td').show()
        .children('.table-wrap').slideDown(function(){
            $(this).click(function(){
                $(this).slideUp(function(){
                    $(this).parent('td').hide();
                });
            });
        });
    ;
});