Selecting Table Cells

by redler

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
<table class="zebra-striped">
    <thead>
        <tr>
            <td></td>
            <th scope="col">Monday</th>
            <th scope="col">Tuesday</th>
            <th scope="col">Wednesday</th>
            <th scope="col">Thursday</th>
            <th scope="col">Friday</th>
            <th scope="col">Saturday</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="user">Sam</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="user">Mallory</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="user">Ethan</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="user">Kate</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="user">Carl</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

CSS

.ui-selecting {
    background: #FECA40 !important;
}

table { width: 90%; }

JavaScript

$("tbody").selectable({
    filter: 'td:not(.user)',
    stop: function(e, ui) {
        var cnt = 0;
        var tally = $('.ui-selected').length;
        var isEdge = function(which, test) {
            var $test = $(test),
                rowIdx = $test.closest('tr').index(),
                colIdx = $test.prevAll('td').length,
                offsets = { // [row, column]
                    top: [0, 0],
                    bottom: [2, 0],
                    left: [1, -1],
                    right: [1, 1]
                },
                result = (function checkIfEdge(which) {
                    var $table = $test.closest('table'),
                        $testCell = $table
                            .find('tr')
                            .eq(rowIdx + offsets[which][0])
                            .find('td')
                            .eq(colIdx + offsets[which][1]);
                    return !$testCell.length || $testCell.not('.ui-selected').length;
                }(which));
            return result;
        }

        $('.ui-selected').each(function(i, el) {
            if (isEdge('top', el)) $(this).css('border-top', '2px solid red');
            if (isEdge('bottom', el)) $(this).css('border-bottom', '2px solid blue');
            if (isEdge('left', el)) $(this).css('border-left', '2px solid green');
            if (isEdge('right', el)) $(this).css('border-right', '2px solid orange');
        });
    }
});