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 のようなタイミングを割り当てているため、テーブルはタイミングを列見出しとして 3 つの列に分割されています. そして、タイミングを次のようにテーブルに割り当てています

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/

これにより、テーブルを拡張することなく、複数の 1 行イベントをスクロール可能なスロットに追加できます。

于 2012-04-27T14:26:27.993 に答える