如何限制JQuery selectable-helper的范围？

我有一个带有JQuery 可选function的表。我的表是可选择的，每个td都在同一列中。 以下是我的完整HTML

          
 
 
 
 
 
 
01
 
 
 
02
 
 
 
03
 
 
 
04
 
 
 
05
 
 
 
06
 
 
 
07
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
   

和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的选择范围，但我不知道该怎么做。 表的元素可在同一列中选择。因此，选择应绑定在同一列中。 我怎样才能用CSS或JavaScript来理解它？

Answer 1

不确定我的问题是否正确。

你想实现这样的目标吗？

因此，对于此示例，它允许您仅选择列范围之间定义的列。

 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; }