选择并高亮显示一行中的单元格

select and highlight cells in one row

本文关键字：一行 单元格 高亮 显示 选择      更新时间：2024-06-01

我目前正在做一些与计划相关的事情。所以我有一张有时间戳的桌子。每一行都以一个人的名字开头。我的想法是，首先你可以选择一个单元格。然后您在该行中被阻止，除非未选择任何单元格，否则只能选择该行中的行。

这是我的密码。有人能帮忙实现吗？

var isMouseDown = false, isHighlighted;
    $(document).on('mousedown','#werknemers_table tr td',function(){
        isMouseDown = true;
        $(this).toggleClass("highlighted");
        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).toggleClass("highlighted", isHighlighted);
        }
    });
    $(document).mouseup(function () {
                      isMouseDown = false;
                    });

当鼠标按下事件发生时，在其父行中添加"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;
                        });
            });

我能想到的最快的解决方案是添加另一个指示当前行的全局。

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

另一种可能的解决方案是将mouseover事件处理程序仅设置在mosedown事件处理程序中的相关行上，然后在mouseup事件中再次将其删除。

相关文章：