table select / deselect cells on click and mouseover without ui

http://stackoverflow.com/questions/18820762/table-select-deselect-cells-on-click-and-mouseover-without-ui

by Sree K

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<table class="table table-condensed table-bordered" style="width:410px; margin:0; padding:0;" id="table">
	<thead>
		<tr>
			<th><em class="icon-time"></em></th>
			<th class="top-hours">12am</th><th class="top-hours">1am</th><th class="top-hours">2am</th><th class="top-hours">3am</th><th class="top-hours">4am</th><th class="top-hours">5am</th><th class="top-hours">6am</th><th class="top-hours">7am</th><th class="top-hours">8am</th><th class="top-hours">9am</th><th class="top-hours">10am</th><th class="top-hours">11am</th><th class="top-hours">noon</th><th class="top-hours">1pm</th><th class="top-hours">2pm</th><th class="top-hours">3pm</th><th class="top-hours">4pm</th><th class="top-hours">5pm</th><th class="top-hours">6pm</th><th class="top-hours">7pm</th><th class="top-hours">8pm</th><th class="top-hours">9pm</th><th class="top-hours">10pm</th><th class="top-hours">11pm</th>		</tr>
	</thead>
	<tbody>
			
				<tr>
					<td>Sun</td><td class="selectable" data-day="sun" data-hour="12am" data-min="0"></td><td class="selectable" data-day="sun" data-hour="1am" data-min="0"></td><td class="selectable" data-day="sun" data-hour="2am" data-min="0"></td><td class="selectable" data-day="sun" data-hour="3am" data-min="0"></td><td class="selectable" data-day="sun" data-hour="4am" data-min="0"></td><td class="selectable" data-day="sun" data-hour="5am" data-min="0"></td><td class="selectable" data-day="sun" data-hour="6am" data-min="0"></td><td class="selectable" data-day="sun" data-hour="7am" data-min="0"></td><td class="selectable" data-day="sun" data-hour="8am" data-min="0"></td><td class="selectable" data-day="sun" data-hour="9am" data-min="0"></td><td class="selectable" data-day="sun" data-hour="10am" data-min="0"></td><td class="selectable" data-day="sun"...

CSS

.selectable.selected {background:#f90;}

JavaScript

$(function(){
	var table = $('#table'), isMouseDown, selected = [], th
		, tblView = $('.tbl-view'), tblHours = $('.top-hours'), selected = []
	$('#clear-selection').on('click', function(){
		$('.selected').removeClass('selected')
	})
	$('#select-all').on('click', function(){
		$('.selectable').addClass('selected')
	})
	// default is 15 min view.
//	var totCells = table.find('tr:eq(1) td').length
//	alert(totCells)
	$('#calculate').on('click', function(){
		var text = $('#text')
		text.html('')
		$('.selected').each(function(){
			var th = $(this), day = th.data('day'), hour = th.data('hour'), min = th.data('min')
		
            // not sure how to go about this exactly..
			if($.inArray(day, selected)){
				if($.inArray(hour, selected[day])){
					//alert(hour+' is in array')
				}
			} else {
				var json = 
                    {   day : day,
						hour : hour,
						min : min
					}
				selected.push(json)
			}
			text.prepend(th.data('day')+' '+th.data('hour')+' '+th.data('min')+"\n")
		})
		console.log(selected)
	})
	tblView.on('click', function(){
		var th = $(this), mins = th.data('mins')
		if(mins == 15){
			tblHours.attr('colspan', 4)
			$('[data-min="15"]').remove()
			$('[data-min="30"]').remove()
			$('[data-min="45"]').remove()
			$('[data-min="0"]').each(function(){
					var th = $(this), hour = th.data('hour'), day = th.data('day')
					$('<td class="selectable" data-day="'+day+'" data-hour="'+hour+'" data-min="15"></td><td class="selectable" data-day="'+day+'" data-hour="'+hour+'" data-min="30"></td><td class="selectable" data-day="'+day+'" data-hour="'+hour+'" data-min="45"></td>').insertAfter(th)
				})
		} else if(mins == 30){
			tblHours.attr('colspan', 2)
			$('[data-min="15"]').remove()
			$('[data-min="45"]').remove()
			if($('[data-min="30"]').length == 0){
				$('[data-min="0"]').each(function(){
					var th = $(this), hour = th.data('hour'), day = th.data('day')
					$('<td class="selectable" data-day="'+day+'" data-hour="'+hour+'"...