http://jsfiddle.net/Cyjye/
I m new to jquery. I have made html table shown in jsfiddle.Firstly selection be made from second row second cell in my html table selection be made from first row second cell. I have allot time to patient not more than 30 minutes. if user selects more than 30 minutes it gives alert “Time slot not more than 30 minutes”. alert works correctly but its added css is not removed after alert. and whenever I mouse up after alert .cell is highlighted with css. I don’t want to do like that if alert generate then recently added css to cell is removed and whenever I mouseup after alert then no cell be highlighted with css. I tried lot but not getting correct way.
when I highlight 30 minute time and click on select patient button(below to html table there is select patient(patient getting from textbox)button) then highlight css is 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>
To remove highlighed css from the last selected cell use
JSFiddle