I'm working on a scheduling table that user' can select cells (which will be gathered with jQuery using data attributes) but I'm trying to work out the best way for user' to be able to select rows and columns in a usable fashion. At the moment you can click and drag cells to select them and you can select rows.
So far this is what I've got, any suggestions would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css" media="screen">
table#power_schedule td
{
width: 140px;
}
table#power_schedule td.selectable, table#power_schedule th {
font-size: 12px;
width: 70px;
height: 25px;
text-align: center;
}
table#power_schedule td.selectable {
width: 60px;
background-color:#77DD77;
border: 1px solid #68C168;
}
table#power_schedule td.highlighted {
background-color:#FF6961;
border: 1px solid #E8615A;
}
table#power_schedule td:first-child {
cursor: pointer;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" id="power_schedule">
<thead>
<th/>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Sun</th>
</thead>
<tr>
<td>00:00-00:30</td>
<td class="selectable"> </td>
<td class="selectable"> </td>
<td class="selectable"> </td>
<td class="selectable"> </td>
<td class="selectable"> </td>
<td class="selectable"> </td>
<td class="selectable"> </td>
</tr>
<tr>
<td>00:30-01:00</td>
<td class="selectable"> </td>
<td class="selectable"> </td>
<td class="selectable"> </td>
<td class="selectable"> </td>
<td class="selectable"> </td>
<td class="selectable"> </td>
<td class="selectable"> </td>
</tr>
<tr>
<td>01:00-01:30</td>
<td class="selectable"> </td>
<td class="selectable"> </td>
<td class="selectable"> </td>
<td class="selectable"> </td>
<td class="selectable"> </td>
<td class="selectable"> </td>
<td class="selectable"> </td>
</tr>
</table>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
// Create table dragging functionality
var isMouseDown = false;
var highlighted
$("table#power_schedule td.selectable")
.mousedown(function () {
isMouseDown = true;
highlighted = $(this).hasClass('highlighted')
if ( highlighted ) {
$(this).removeClass('highlighted')
} else {
$(this).addClass('highlighted')
}
return false; // prevent text selection
})
.mouseover(function () {
if (isMouseDown) {
if ( highlighted ) {
$(this).removeClass('highlighted')
} else {
$(this).addClass('highlighted')
}
}
})
.bind("selectstart", function () {
return false; // prevent text selection in IE
})
$('table#power_schedule td:first-child')
.mousedown(function() {
isMouseDown = true;
$(this).parent().find('td:not(:first-of-type)').toggleClass('highlighted')
$(this).css('cursor', 'pointer')
return false
})
.mouseover(function() {
if (isMouseDown) {
$(this).parent().find('td:not(:first-of-type)').toggleClass('highlighted')
}
})
.bind("selectstart", function () {
return false; // prevent text selection in IE
})
$(document)
.mouseup(function () {
isMouseDown = false
})
});
</script>
</body>
</html>