Question

我有一个jQuery时间表，用于分配工作日的时间段。我的工作日剧本是，

<table class="container" id="tabTimetable">
            <tr class="timtebleheader">
                <td></td>
            </tr>
            <tr class="monday">
                <td class="timetableweekday">Monday</td>
            </tr>
            <tr  class="tuesday">
                <td class="timetableweekday">Tuesday</td>
            </tr>
            ...... upto saturday
            ......
</table>

通过使用另一个div分配时间，如08:00 - 09：00,09：00 - 10:00，10：00 - 11:00，所以我的表现在分为三列时间作为列标题。并且正在将时间分配到表中

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

现在我的桌子就是这样，

enter image description here

并将当前行和列设为，

function selTimeSlot(objCol) {

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

        currentCol = $(objCol).parent().children().index($(objCol));
        currentRow = $(objCol).parent().parent().children().index($(objCol).parent());

如果我点击此处的特定单元格，则会出现一个带有文本框的搜索人员窗口，并且在自动填充选定的工作人员项目中，将详细信息绑定到该特定单元格中，如

 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();

我的updateTable函数是， function updateTable（）{

        for (var i = 0; i < timetable.length; i++) {              

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

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


                $(col).html(data);
            }

这里当我尝试在不同的行中分配特定数据（每行1个数据）时，数据被分配给特定的单元格，这里没问题，但是当我尝试在同一列中分配多个数据时数据被附加到同一个单元格，如何解决这个问题任何人都可以帮助我......

它就像这样来了

enter image description here

Answer 1

这似乎是在HTML中构建表格的问题，因此如果您检查我的解决方案遇到类似的布局问题，它可能会有所帮助：

setting hidden overflow on a table within a table

这是一个相当简单的解决方案，它使可滚动的div占用给定的宽度，并允许它跨越几个时隙。

http://jsfiddle.net/aramk/wHEm6/3/

这将允许您将几个单行事件添加到可滚动的插槽中，而无需扩展表。

jQuery的时间表

1 个答案: