Javascript jquery选择当前tr的第二个和第三个单元格
我是jquery新手。下面是我的html表格，它位于内容页中。在母版页中，我还有其他表格。 通过拖动从“tableAppointment”中选择表格单元格时。它选择页面中的所有表格单元格。用户只能选择当前tr的第二个和第三个单元格。如果用户选择的行数超过三行，则给alerttime插槽的时间不超过45分钟…我如何使用jquery实现这一点Javascript jquery选择当前tr的第二个和第三个单元格,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我是jquery新手。下面是我的html表格，它位于内容页中。在母版页中，我还有其他表格。 通过拖动从“tableAppointment”中选择表格单元格时。它选择页面中的所有表格单元格。用户只能选择当前tr的第二个和第三个单元格。如果用户选择的行数超过三行，则给alerttime插槽的时间不超过45分钟…我如何使用jquery实现这一点 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w
<!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;
$('#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
$(this).addClass("csstdhighlight");
$(this).addClass("temp_selected");
});
$('#tableAppointment tr td:nth-child(2), #tableAppointment tr td:nth-child(3)').mousemove(function (ev)
{
if (active)
{
$(this).addClass("csstdhighlight");
$(this).addClass("temp_selected");
}
if ($('.temp_selected').length > 6)
{
alert("Time slot not more than 45 minutes.")
return false;
}
});
$(document).mouseup(function (ev)
{
active = false;
$('.temp_selected').removeClass('.temp_selected');
});
});
</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>
像这样的怎么样
$("td").mousemove(function (ev) {
if (active){
$(this).addClass("csstdhighlight");
}
if($('.csstdhighlight').length > 2){
alert("time slot not more than 45 minutes.")
}
});
我已应用但不起作用拖动时选择页面内的所有单元格您是否已将$tableAppointment td替换为$tableAppointment tr td:nth-child2'？我已更改鼠标移动事件它仅选择第二个单元格我必须选择当前tr的第二个和第三个单元格。alerttime slot不超过45分钟怎么样。$'tableAppointmenttr td:nth-child2，tableAppointment tr td:nth-child3'这将选择第二个和第三个。没有rishabh我有chk，但它再次像过去一样工作，选择页面中的所有单元格iIya：我有chk，但每次单击页面上的任意位置时它都会弹出。这应该只在该类中有两个以上元素时才会出现。在您选择任何元素之前，该类是否已应用于某些元素？csstdhighlight类已应用于当前tri-think alert的选定CEL未处于鼠标移动状态如果您将我作为JSFIDLE示例，我将更好地了解脚本的工作方式：
$("td").mousemove(function (ev) {
if (active){
$(this).addClass("csstdhighlight");
}
if($('.csstdhighlight').length > 2){
alert("time slot not more than 45 minutes.")
}
});
$("#tableAppointment td").mousedown(function (ev)
{
active = true;
$(".csstdhighlight").removeClass("csstdhighlight"); // clear previous selection
ev.preventDefault(); // this prevents text selection from happening
$(this).addClass("csstdhighlight");
$(this).addClass("temp_selected");
});
$("td").mousemove(function (ev)
{
if (active)
{
$(this).addClass("csstdhighlight");
$(this).addClass("temp_selected");
}
if($('.temp_selected').length > 2){
alert("time slot not more than 45 minutes.")
}
});
$(document).mouseup(function (ev)
{
active = false;
$('.temp_selected').removeClass('temp_selected');
});