Question

I have a time picker I built in .NET that is a table format. Each row has a value of a 30 minute time interval. I have implemented the jquery that lets me click on a start time and drag down the list and pick an end time to select a time range. The problem I am running into is the jquery to store the value of the first row that is clicked and store the end time in the last row that was ‘mouseovered’. Here is the jquery so far.

<script type="text/javascript">
$(function () {
    var isMouseDown = false;
    var begintime;
    var endtime;
    $("#BodyLeft_timeTable td").mousedown(function () {
        isMouseDown = true;
        $(this).toggleClass("highlighted");
        return false;
    }).mouseover(function () {
        if (isMouseDown) {
            $(this).toggleClass("highlighted");
        }
    }).bind("selectstart", function () {
        return false;
    });

    $(document).mouseup(function () {
        isMouseDown = false;
        window.location.href = "HoursDetail.aspx";
    });
});
</script>

Here is the link to the pic of where I am going with the time picker. When the mouseup event is fired the first and last times picked are used to redirect to new page and include these two values in the query string.

http://i869.photobucket.com/albums/ab251/bradedwards0978/timepicker.png

Any help would be great.

Thanks.

Answer 1

Hope this works, or you can at least get a good idea of where I’m headed with it.

//Select all cells that contain the class "highlighted"
var selected = $("#BodyLeft_timetable td").filter('.highlighted');
//select first & last for range
var first = selected.first().id;
var last = selected.last().id;

var href = "HoursDetail.aspx?first=" + first + "&last=" + last;
window.location.href = href
//ex: HoursDetail.aspx?first=0830am&last=0100pm

Scan the DOM for the data cells that are highlighted (as indicated by the css class you applied to them). From that collection, grab the id of the first and last objects. Load up the query string with those id's.

The only problem I potentially see is that I don’t know if you’ve given each cell in the table an individual ID or if that’s going to present a problem. What you could do is assign each cell with a data-time attribute and a value of 1pm 930am etc and instead of grabbing the .id you can grab .attr('data-time')