jquery 根据所选内容选择多行上的所有td

我需要选择所有的td在我的表与拖动事件。我试图实现的是基于我第一次选择的td创建一个日期范围，直到最后一次选择的td，但它们可以跨越多行。目前，我使用nextUntil()和andSelf()来包含最后选择的，但它只选择当前树中的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);
        });
    };

我冒昧地构造了一个小提琴，它用可拖动的工作日来说明日历。它还不能满足用户拖动的需要，但是你应该能够很容易地调整代码来适应它。

$(document).ready(function () {
    $("td.week").hover(
        function () { $(this).addClass("hover"); },
        function () { $(this).removeClass("hover"); }
    );
    var busySelecting = false;
    var selectedDays = [];
    var contains = function(day) {
        for (var d in selectedDays) {
            if (selectedDays[d].text() == day.text())
                return true;
        }
        return false;
    };
    $("td.week").mousedown(function () {
        selectedDays = [];
        $("td.week").removeClass("selected");
        busySelecting = true;
        if ($(this).text() != "") {
            $(this).addClass("selected");
            selectedDays.push($(this));
        }
        return false;
    });
    $("td.week").mouseover(function () {
        if (busySelecting &&
           $(this).text() != "")
        {
            var busyHovering = $(this);
            $("td.week").each(function () {
                if ($(this).text() != "" &&
                    parseInt($(this).text(),10) > parseInt(selectedDays[0].text(),10) &&
                    parseInt($(this).text(),10) <= parseInt(busyHovering.text(),10) &&
                    !contains($(this))) {
                    $(this).addClass("selected");
                    selectedDays.push($(this));                
                }
            });
            $(selectedDays).each(function () {
                if (parseInt($(this).text(),10) > parseInt(busyHovering.text(),10)) {
                    $(this).removeClass("selected");
                    selectedDays.pop($(this));
                }
            });
            selectedDays.push($(this));
        }
    });
    $(document).mouseup(function () {
        busySelecting = false;
        alert("You selected the following range: " +
              selectedDays[0].text() + " - " +
              selectedDays[selectedDays.length - 1].text());
    });
});

td
{
    padding:10px;
    cursor:default;
}
td.hover
{
    background:#EEE;
}
td.weekend
{
    background:silver;
}
td.selected
{
    background:#5EE;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table>
    <tr>
        <td class="weekend"></td>
        <td class="week"></td>
        <td class="week">1</td>
        <td class="week">2</td>
        <td class="week">3</td>
        <td class="week">4</td>
        <td class="weekend">5</td>
    </tr>
    <tr>
        <td class="weekend">6</td>
        <td class="week">7</td>
        <td class="week">8</td>
        <td class="week">9</td>
        <td class="week">10</td>
        <td class="week">11</td>
        <td class="weekend">12</td>
    </tr>
    <tr>
        <td class="weekend">13</td>
        <td class="week">14</td>
        <td class="week">15</td>
        <td class="week">16</td>
        <td class="week">17</td>
        <td class="week">18</td>
        <td class="weekend">19</td>
    </tr>
    <tr>
        <td class="weekend">20</td>
        <td class="week">21</td>
        <td class="week">22</td>
        <td class="week">23</td>
        <td class="week">24</td>
        <td class="week">25</td>
        <td class="weekend">26</td>
    </tr>
    <tr>
        <td class="weekend">27</td>
        <td class="week">28</td>
        <td class="week">29</td>
        <td class="week">30</td>
        <td class="week">31</td>
        <td class="week"></td>
        <td class="weekend"></td>
    </tr>
</table>

jquery 根据所选内容选择多行上的所有td

1条答案

相关问题

热门标签

最新问答