我目前正在做一些与计划有关的事情。所以我有一张带时间戳的桌子。每一行都以一个人的名字开头。我的想法是,首先你可以选择一个单元格。然后,您在该行中被阻止,除非没有选择单元格,否则您只能选择该行中的行。
这是我的代码。有人可以帮助实现吗?
<script src="http://maps.googleapis.com/maps/api/js?key={KEY}">
答案 0 :(得分:0)
我能想到的最快解决方案是添加另一个指示当前行的全局。
var currentTR = null;
然后,在你的mousedown事件处理程序中设置它:
currentTR = $(this).closest('tr');
然后,您的鼠标悬停事件:
if (!isMouseDown) return;
if (!$(this).parents().is(currentTR)) return; // <-- ignore event if we're not a child of the relevant row
$(this).toggleClass("highlighted", isHighlighted);
另一种可能的解决方案是将鼠标悬停事件处理程序设置在mosedown事件处理程序中的相关行上,并在mouseup事件中再次将其删除。
答案 1 :(得分:0)
当鼠标按下事件发生时,在其父行中添加'current_row'类。然后只在具有'current_row'类的行中添加突出显示的类。
使用以下代码:
var isMouseDown = false, isHighlighted;
$(document).on('mousedown','#werknemers_table tr td',function(){
isMouseDown = true;
console.log('mousedown');
$(this).toggleClass("highlighted").closest('tr').toggleClass('current_row');
console.log("Click");
console.log($(this).attr('class'));
isHighlighted = $(this).hasClass("highlighted");
return false; // prevent text selection
});
$(document).on('mouseover','#werknemers_table tr td',function(){
if (isMouseDown && $(this).closest('tr').hasClass('current_row')) {
$(this).toggleClass("highlighted", isHighlighted);
}
});
$(document).mouseup(function () {
isMouseDown = false;
});
});