javascript - How i get appointment time (From time,To time) in jquery

Question

I am selecting time slot on dragging on time slot cell. After selecting time slot, I enter patient name in textbox and click on select button then patient name goes to selected time slot. The user can select multiple time slot for multilpe patient name and onclick of allot button I have to insert patient name with time slot (From time To time) to database.

I have problem in getting alloted time slot ie.From time and To time in jquery.

$("#btnAllot").click(function () {
    //how i get alloted time here.
    $('tr').each(function () {
        $(this).find('td').each(function () {
            if ($(this).hasClass('yell')) {
                alert($(this).closest('tr').find('td:eq(0)').text());

            };
        });
    });
}

see jsbin on dragging on time slot cell

Answer 1

Ok, here is one way to do it:

You iterate over each row whose third cell has a rowspan attribute. This indicates the start of a new appointment. You can get the start time by examining the siblings (sort of) and the end time by getting the row that is rowspan - 1 elements away.

There might be better ways, but this might give you a start.

For example:

var find_closest_hour = function($row) {
    var $cell = $row.children('td:first-child'),
        hour = "";
    // probably add something here
    while($cell.length && !(hour = $.trim($cell.text()))) {
        $cell = $cell.parent().prev().children('td:first-child');
    }
    return hour;
};

var $all_tds = $('#tableAppointment tr td:nth-child(3)'),
    $tds = $all_tds.filter('[rowspan]'); 

// will contain a list of objects [{patient: name, start: time, end: time},...]
var appointments = $tds.map(function() {
    var $this = $(this),
        $row = $this.parent(),
        $cells =  $row.children('td'),
        patient = $.trim($this.text()),
        start = find_closest_hour($row).split(':', 1) + ":" + $.trim($cells.eq(1).text()),
        $end_row, end;

    if(this.rowspan == 1) {
        end = start;
    }
    else {
        $end_row = $all_tds.eq($all_tds.index(this) + this.rowSpan - 1).parent();
        end = find_closest_hour($end_row).split(':', 1) + ":" + $.trim($end_row.children('td').eq(1).text());
    }

    return {patient: patient, start: start, end: end};
}).get();

DEMO

I will let you figure out how to format the times properly ;)

Note: This very much depends on your current table structure and is likely to break if you change it. To make things more flexible, you could add classes to cells that contain the important information, for example hour to each first cell that contains the hour of the day and appointment_start to the cell of an appointment. Then you could search for/filter by these.