jquery cell selection starts make rowspan for further cells

Question

see fiddle

Firstly i am new to jquery.

i have to make one cell selection only #tableAppointment tbody tr td:nth-child(2) and textbox value should go to next cell where selection starts.

I made functionality in my fiddle but the textbox value goes to all cells. I have to set the textbox value to the first cell and other cell be rowspan(Means user see for all cell selection only one textbox value).For getting value in next cells i have taken span tag of html but i dont want span tag.

//ONE cell selection code
var active = false;

            $('#tableAppointment tbody tr td:nth-child(2)').mousedown(function (ev)
            {
                active = true;
                $(".csstdhighlight").removeClass("csstdhighlight"); // clear previous selection
                ev.preventDefault(); // this prevents text selection from happening
                $(this).addClass("csstdhighlight");
                $(this).addClass("temp_selected");
            });

            $('#tableAppointment tbody tr td:nth-child(2)').mousemove(function (ev)
            {
                if (active)
                {
                    $(this).addClass("csstdhighlight");
                    $(this).addClass("temp_selected");
                }
                if ($('.temp_selected').length == 3)
                {
                    return false;
                }
                if ($('.temp_selected').length > 3)
                {
                    alert("Time slot not more than 30 minutes.");
                    $(this).removeClass("csstdhighlight");
                    $(this).removeClass("temp_selected");
                    return false;
                }
            });

            $(document).mouseup(function (ev)
            {
                active = false;
                $('.temp_selected').removeClass('.temp_selected');

            });

Answer 1

I think you are looking for something like this:

jQuery('#update').click(function() {
    var cells=$('#tableAppointment tbody tr td:nth-child(3)');
    var i=0;
    var topcell=false;
    cells.each(function() {
        var $cell = $(this);

        if ($cell.hasClass('csstdhighlight')) {
            if(i==0){
                $cell.find('span').text(jQuery('#patientNames').val());
                topcell=$cell;
            }else{
               $cell.remove();
            }
            i++;
        }
    });
    if(topcell) topcell.attr('rowspan',i);
});​