我是 jquery 的新手。下面是我的 html 表格，它位于内容页面中。在母版页中，我还有其他表格。 当我通过拖动从“tableAppointment”中选择表格单元格时。它选择页面中的所有表格单元格。用户只能选择当前 tr 的第二个和第三个单元格。如果用户选择超过三行，则发出警报(“时间段不超过 45 分钟。”)。我如何使用 jquery 做到这一点。
<!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>
最佳答案
尝试使用 $('#tableAppointment tr td:nth-child(2)')
for alert("time slot not more than 45 minutes.")
<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)
{
ev.preventDefault(); // this prevents text selection from happening
if(get_num_rows() > 3)
{
alert("time slot not more than 45 minutes");
return false;
}
active = true;
num_rows_selected = num_rows_selected + 1;
$(".csstdhighlight").removeClass("csstdhighlight");
$(this).addClass("csstdhighlight");
});
$("td").mousemove(function (ev)
{
if (active)
{
$(this).addClass("csstdhighlight");
}
});
function get_num_rows() {
var count = 0;
$("#tableAppointment tr").each(function(){
if($(this).find('td.csstdhighlight').length > 0)
{
count++;
}
});
return count;
}
$(document).mouseup(function (ev)
{
active = false;
});
});
</script>
关于javascript - jquery 选择当前 tr 的第二个和第三个单元格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10959973/