Javascript 如何限制JQuery可选助手'；s范围？
我有一个具有JQuery功能的表。我的表可以选择同一列中的每个td。下面是我的完整htmlJavascript 如何限制JQuery可选助手'；s范围？,javascript,jquery,css,jquery-ui,Javascript,Jquery,Css,Jquery Ui,我有一个具有JQuery功能的表。我的表可以选择同一列中的每个td。下面是我的完整html <html> <head> <link href="/css/jquery-ui.css" rel="stylesheet" type="text/css"> <link href="/css/schedulerGrid.css" rel="stylesheet" type="text/css"> &l
<html>
<head>
<link href="/css/jquery-ui.css" rel="stylesheet" type="text/css">
<link href="/css/schedulerGrid.css" rel="stylesheet" type="text/css">
<script src="/js/jquery-ui.js" type="text/javascript">
<script src="/js/jquery.js" type="text/javascript">
<script src="/js/schedulerGrid.js" type="text/javascript">
</head>
<head>
<body>
<div class="scheduler-area">
<div class="scheduler-container">
<table class="scheduler">
<thead>
<tr>
<th class="header">
<div class="header-name">01</div>
</th>
<th class="header">
<div class="header-name">02</div>
</th>
<th class="header">
<div class="header-name">03</div>
</th>
<th class="header">
<div class="header-name">04</div>
</th>
<th class="header">
<div class="header-name">05</div>
</th>
<th class="header">
<div class="header-name">06</div>
</th>
<th class="header">
<div class="header-name">07</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
</tr>
<tr>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
</tr>
<tr>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
</tr>
<tr>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
</tr>
<tr>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
</tr>
<tr>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
</tr>
<tr>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
</tr>
<tr>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
<td class="item"></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
我的问题是我想限制可选助手的选择范围，但我不知道如何做。表的元素在同一列中是可选择的。因此，选择应该绑定在同一列中。我怎样才能用CSS或JavaScript来理解呢？我不确定你的问题是否正确 你想实现这样的目标吗 因此，对于本例，它允许您仅选择在列范围之间定义的列
var columnsRange =[[0,1],[2,3],[0,3],[0,3],[1,3],[3,3],[1,3]];
var currentCol;
$(".scheduler-container").selectable({
filter: ".item",
start: function(event, ui) {
$(".item").removeClass("ui-selected");
},
stop: function(event, ui) {
//Reset selector.
currentCol = undefined;
},
selecting: function(event, ui) {
if (currentCol === undefined) {
currentCol = $(ui.selecting).index();
}
var nthChild = parseInt(currentCol) + 1; //Add one as nthChild is not zero index
for (var i = 1; i <= $(".scheduler").children('tbody').children('tr').children('.item').length; i++) {
if (i != nthChild) {
$(".item.ui-selecting:nth-child(" + i + ")").each(function() {
$(this).removeClass("ui-selecting");
});
}
};
if (!isInRange($(ui.selecting))) {
$(ui.selecting).removeClass("ui-selecting");
}
}
});
function isInRange(cell){
if (cell.closest('tr').index() >=columnsRange[cell.index()][0] && cell.closest('tr').index() <=columnsRange[cell.index()][1])
{
return true;
}
return false;
}
var columnsRange=[[0,1]、[2,3]、[0,3]、[0,3]、[1,3]、[3,3]、[1,3]；
var-currentCol；
$（“.scheduler容器”）。可选({
过滤器：“.item”，
开始：功能（事件、用户界面）{
$（“.item”）.removeClass（“选定的ui”）；
},
停止：功能（事件、用户界面）{
//重置选择器。
currentCol=未定义；
},
选择：功能（事件、用户界面）{
如果（currentCol==未定义）{
currentCol=$（ui.selecting）.index（）；
}
var nthChild=parseInt（currentCol）+1；//添加一个，因为nthChild不是零索引
对于（var i=1；i=columnsRange[cell.index（）][0]&&cell.closest（'tr'）.index（），如果您对我的问题不太清楚，我希望实现的示例链接是。
.scheduler-area {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #777777;
overflow: hidden;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc3Nzc3NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0OTQ5NDkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #777777 0%, #494949 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#777777), color-stop(100%,#494949));
background: -webkit-linear-gradient(top, #777777 0%,#494949 100%);
background: -o-linear-gradient(top, #777777 0%,#494949 100%);
background: -ms-linear-gradient(top, #777777 0%,#494949 100%);
background: linear-gradient(to bottom, #777777 0%,#494949 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#777777', endColorstr='#494949',GradientType=0 );
}
.scheduler-container {
overflow-y: auto;
height: 200px;
}
.scheduler {
border-spacing: 0;
width:100%;
}
.scheduler .item + .item {
border-left:1px solid #777777;
}
.scheduler .item, .header {
border-bottom:1px solid #777777;
background: #F7F7F7;
color: #000;
padding: 25px;
}
.scheduler .header {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
border-left: 1px solid #777777;
border-bottom: none;
}
.scheduler .header:FIRST-CHILD {
border-left: none;
}
.scheduler .header .header-name{
position: absolute;
background: transparent;
color: #fff;
padding: 8px 25px;
top: 0;
margin-left: -26px;
line-height: normal;
border-left: 1px solid #393C44;
width: 165px;
}
.scheduler .header:first-child .header-name{
border: none;
}
.scheduler .ui-selecting {
background: #97B58F;
}
.scheduler .ui-selected {
background: #4C6840;
color: white;
}
.ui-selectable-helper {
border:1px solid #747474;
}
var columnsRange =[[0,1],[2,3],[0,3],[0,3],[1,3],[3,3],[1,3]];
var currentCol;
$(".scheduler-container").selectable({
filter: ".item",
start: function(event, ui) {
$(".item").removeClass("ui-selected");
},
stop: function(event, ui) {
//Reset selector.
currentCol = undefined;
},
selecting: function(event, ui) {
if (currentCol === undefined) {
currentCol = $(ui.selecting).index();
}
var nthChild = parseInt(currentCol) + 1; //Add one as nthChild is not zero index
for (var i = 1; i <= $(".scheduler").children('tbody').children('tr').children('.item').length; i++) {
if (i != nthChild) {
$(".item.ui-selecting:nth-child(" + i + ")").each(function() {
$(this).removeClass("ui-selecting");
});
}
};
if (!isInRange($(ui.selecting))) {
$(ui.selecting).removeClass("ui-selecting");
}
}
});
function isInRange(cell){
if (cell.closest('tr').index() >=columnsRange[cell.index()][0] && cell.closest('tr').index() <=columnsRange[cell.index()][1])
{
return true;
}
return false;
}