timetable with jQuery
<p>I've a jQuery timetable for allotting timeslots for the week days. My script for weekdays is,</p>

<pre><code>&lt;table class="container" id="tabTimetable"&gt;
            &lt;tr class="timtebleheader"&gt;
                &lt;td&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr class="monday"&gt;
                &lt;td class="timetableweekday"&gt;Monday&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr  class="tuesday"&gt;
                &lt;td class="timetableweekday"&gt;Tuesday&lt;/td&gt;
            &lt;/tr&gt;
            ...... upto saturday
            ......
&lt;/table&gt;
</code></pre>

<p>by using another div am allotting the timing like 08:00 - 09:00, 09:00 - 10:00, 10:00 - 11:00 like this, so my table is now divided with three columns with the timings as column headings. and am allotting the timings into the table as</p>

<pre><code>var totalCol += 1;
$("#tabTimetable &gt; tbody &gt; tr:gt(0)").append("&lt;td class='timetableslot " + totalCol + "' onclick='selTimeSlot(this);'&gt;&lt;/td&gt;");
</code></pre>

<p>and now my table is like this,</p>

<p><img src="http://i.stack.imgur.com/fHaHL.png" alt="enter image description here"></p>

<p>and am gettin the current row and column as,</p>

<pre><code>function selTimeSlot(objCol) {

        var pos   = $(objCol).position();           

        currentCol = $(objCol).parent().children().index($(objCol));
        currentRow = $(objCol).parent().parent().children().index($(objCol).parent());
</code></pre>

<p>if I click particular cell here, a window with a textbox to search staff appear, and in the autocomplete selected item of staff, am binding the details into that particular cell like</p>

<pre><code> select: function (event, ui) {

                var timetableItem = new Object();

                timetableItem.StaffId   = ui.item.id;
                timetableItem.Name      = ui.item.value;
                timetableItem.Photo     = ui.item.image;
                timetableItem.ItemName  = $("#txtItemName").val();
                timetableItem.Row       = currentRow;
                timetableItem.Col       = currentCol;
                timetableItem.From      = slots[currentCol - 1].From;
                timetableItem.To        = slots[currentCol - 1].To;
                timetableItem.WeekDay   = currentRow;
                timetableItem.SectionId = selsection;

                timetable[timetable.length] = timetableItem;

                $("#selItem").hide();
                updateTable();
</code></pre>

<p>and my updateTable function is,
    function updateTable() {</p>

<pre><code>        for (var i = 0; i &lt; timetable.length; i++) {              

            if (timetable[i] != null) {
                var row = $("#tabTimetable &gt; tbody &gt; tr").eq(timetable[i].Row);
                var col = $(row).find("td:eq(" + timetable[i].Col + ")");

                var data = "&lt;div class='timetableslotselected'&gt;&lt;table width='100%'&gt;&lt;tr&gt;&lt;td align='right'&gt;&lt;div class='close16' onclick='removeItem(" + timetable[i].Row + "," + timetable[i].Col + ",event)' /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;div&gt;&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;img src='" + timetable[i].Photo + "' width='32px' height='32px'/&gt;&lt;/td&gt;&lt;td&gt;" + timetable[i].Name + " ( " + timetable[i].ItemName + " )&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;&lt;/div&gt; ";


                $(col).html(data);
            }
</code></pre>

<p>here when I try to allot particular data in different rows(1 data in each row) the data is allotted to the particular cell, no problem here, but when I try to allot more than one data in the same column all the datas are appended to the same cell, how to fix this issue can anyone help me here......</p>

<p>its coming like this</p>

<p><img src="http://i.stack.imgur.com/zwDLD.png" alt="enter image description here"></p>
