0

我有一个 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>");

现在我的桌子是这样的，

在此处输入图像描述

并且将当前行和列设置为，

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 个数据）时，数据被分配给特定的单元格，这里没问题，但是当我尝试在同一列中分配多个数据时，所有数据都被附加到同一个单元格，如何解决这个问题任何人都可以在这里帮助我......

它是这样来的

在此处输入图像描述

4

1 回答 1

1

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

在表中的表上设置隐藏溢出

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

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

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

于 2012-04-27T14:26:27.993 回答