http://jsfiddle.net/Cyjye/ I am a beginner with jquery. I have created an HTML table shown in the jsfiddle link. Initially, the selection should be made from the second row, second cell, but in my HTML table, the selection is being made from the first row, second cell. I only have 30 minutes to spare for this issue. If a user selects more than 30 minutes, an alert saying "Time slot not more than 30 minutes" should pop up. The alert works correctly, however, the added CSS remains even after the alert is dismissed. Whenever I release the mouse button after the alert, the cell is highlighted with CSS, which I don't want. My goal is to remove the recently added CSS when the alert generates and prevent any cells from being highlighted with CSS upon releasing the mouse button. Despite my efforts, I haven't been able to find a solution. When I highlight a 30-minute time slot and click on the "select patient" button (found below the HTML table), the highlight CSS should be removed.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drag selection example</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function ()
{
var active = false;
var lastActionWasError = false;
$('#tableAppointment tr td:nth-child(2), #tableAppointment tr td:nth-child(3)').mousedown(function (ev)
{
active = true;
$(".csstdhighlight").removeClass("csstdhighlight"); // clear previous selection
ev.preventDefault(); // this prevents text selection from happening
$(".csstdhighlight").removeClass("csstdhighlight");
$(".temp_selected").removeClass("temp_selected");
$(this).addClass("csstdhighlight");
$(this).addClass("temp_selected");
});
$('#tableAppointment tr td:nth-child(2), #tableAppointment tr td:nth-child(3)').mousemove(function (ev)
{
if (lastActionWasError)
{
$(".csstdhighlight").removeClass("csstdhighlight");
$(".temp_selected").removeClass("temp_selected");
lastActionWasError = false;
}
if (active)
{
$(this).addClass("csstdhighlight");
$(this).addClass("temp_selected");
}
if ($('.temp_selected').length > 6)
{
alert("Time slot not more than 45 minutes.");
$(this).removeClass("csstdhighlight");
$(this).removeClass("temp_selected");
lastActionWasError = true;
return false;
}
});
});
</script>
<style type="text/css">
.csstdhighlight
{
background-color: #ccffcc;
}
</style>
</head>
<body>
<table id="tableAppointment" cellspacing="1" width="50%" border="1" align="center">
<tr>
<td bgcolor="#ffffff">
</td>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
<b>Patient Name</b>
</td>
</tr>
<tr>
<td class="csstablelisttd" valign="top" width="70px">
8:00AM
</td>
<td class="csstablelisttd">
0
</td>
<td class="csstablelisttd">
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
15
</td>
<td class="csstablelisttd">
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
30
</td>
<td class="csstablelisttd">
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
45
</td>
<td class="csstablelisttd">
</td>
</tr>
<tr>
<td class="csstablelisttd" valign="top" width="90px">
9:00AM
</td>
<td class="csstablelisttd">
0
</td>
<td class="csstablelisttd">
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
15
</td>
<td class="csstablelisttd">
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
30
</td>
<td class="csstablelisttd">
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
45
</td>
<td class="csstablelisttd">
</td>
</tr>
</table>
</body>
</html>