我有一个带有 JQuery 的表 selectable feature.My Table 可以选择同一列中的每个 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">
<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>
和JavaScript可选择
var currentCol;
$(document).ready(function(){
$(".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;
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");
});
}
}
;
}
});
});
而CSS是
.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;
}
这里是JSFIDDLE Link 。 我的问题是我想限制 selectable-helper 的选择范围，但我不知道该怎么做。表格的元素可以在同一列中选择。因此，选择应该绑定(bind)在同一列内。我如何用 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;
}
关于javascript - 如何限制JQuery selectable-helper的范围？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32267466/