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

这是我的代码。 有人可以帮助实现它吗?

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

#1楼 票数: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);

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

#2楼 票数: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;
                        });

            });

  ask by jaronnan translate from so

未解决问题?本站智能推荐:

2回复

使用下拉选择菜单突出显示一行表格单元格(不同情况)

我是一个初学者,所以我不太了解Javascript / jQuery。 我在第一个单元格中有一个带有下拉菜单的表格。 我要从下拉菜单中选择一个项目并突出显示相应的行。 因此,如果我选择3,则(“ 3”)行将突出显示。 类似于JSFiddle1 : 和JSFiddle2 :
2回复

选择一行中的单元格

我想通过单击和拖动来选择时间表中的单元格,同时限制选择仅在选择开始的行(例如A行)上发生-如果光标移出A行并返回到行,则不执行任何操作A,选择第一个单元格和当前单元格(包括)之间的单元格。 目前,一般的选择工作正常(我在这里创建了一个jsfiddle),但是我不能将选择限制在选择开始的行上,
2回复

将鼠标悬停在一个表格单元格中将突出显示一行中的前一个单元格

我有一个不同单元格大小的表。 我试图制作类似于我悬停在一个单元格中的东西,只有一行中的前一个单元格会突出显示。 JS FIddle 从示例中您可以看到Item + Item a + item j具有灰色背景,它解释了我现在正在单元格“item j”上停留,并且前面的单元格也会突出显示。
2回复

查找单元格内容突出显示同一行中的其他单元格

使用以下内容, http://jsfiddle.net/jfriend00/Uubqg/ 有谁知道我如何连续定位任何单词并使它突出显示同一行中的特定单元格 例如,如果单词“ one”在任何地方都可以找到,那么它将突出显示该行的第一个单元格?
3回复

如何突出显示到期日的行单元格

这个问题已经在这里有了答案: 突出显示从现在到2周后的所有日期 1个答案 嗨,我在我的任务中进行了大量搜索,找到了一个从今天开始直到+2周为日期涂色的脚本。 今天之间的所有日期(例如2014-02-06和2014-02-20)应标记为红色。 此外,过去的日期也必须标记为橙色
2回复

如何根据单元格单击突出显示表格行?

我有一个引导表。 如果用户单击特定的单元格(删除),我想突出显示红色的行。 我正在使用click-cell.bs.table ,但是单击单元格时没有任何反应。 http://jsfiddle.net/46eaytfn/
2回复

突出显示悬停行的特定表格单元格

我有一张桌子,它看起来像这样: 我希望能够突出显示一行(例如Centro Moctezuma )并且只突出显示第一列中的公司名称。 因此,在突出显示第 2 行时,应突出显示Centro Moctezuma的名称,而不是Alfreds Futterkiste.的名称Alfreds Futterkist
1回复

如何选择html单元格并通过像日历一样拖动来突出显示

假设我们有如下表。 如果我 mousedown 在 2 然后 mouseup 在 5,我想要的结果是单元格 2,3,4,5 像日历视图一样突出显示。 另一种情况是 mousedown 在 5 处,然后 mouseup 在 3 处,cells3,4,5 被高亮显示。 我怎样才能得到这样的结果? 我尝试