根据选择选择多行中的所有td

时间:2012-09-03 11:59:30

标签: javascript jquery

我需要使用拖动事件选择表格中的所有td。我想要实现的是根据我的第一个选定的td创建一个日期范围,直到最后选择的td,但它们可以跨越多行。 目前,我使用nextUntil()andSelf()来包含最后选择的内容,但它只选择当前tr中的td。 下面是我的代码示例。 请帮忙。

this.BindCalendarMouseDrag = function () {
        var isMouseDown = false;
        var isHighlighted;
        var selectedDays = [];
        $(".tabCalendarContainer tr.trCalWeek td")
            .mousedown(function () {
                isMouseDown = true;
                $(this).addClass("highlighted");
                isHighlighted = $(this).hasClass("highlighted");
                selectedDays.push($(this));
                return false; // prevent text selection
            })
            .mouseover(function () {
                if (isMouseDown) {
                    $(this).addClass("highlighted", isHighlighted);

                    var firstSelectedDay = selectedDays[0];
                    firstSelectedDay.nextUntil($(this)).andSelf().add($(this)).addClass("highlighted", isHighlighted);

                    selectedDays.push($(this));
                }
            })
            .bind("selectstart", function () {
                return false;
            });

        $(document).mouseup(function () {
            isMouseDown = false;
            //alert(selectedDays.length);
        });
    };

1 个答案:

答案 0 :(得分:0)

我冒昧地构建了一个jsFiddle,它说明了一个可拖动工作日的日历。它不适合BACKWARDS拖动,但您应该能够轻松调整代码以适应它。

您可以访问here