当开始和结束时间改变时,删除/添加正确的

时间:2013-06-12 19:21:46

标签: javascript jquery html

我创建了一个用于组织活动会话的网格视图。此网格在最左侧列中以30分钟为增量,然后到事件所具有的右侧不同轨道。您可以在网格周围拖放会话来安排您的活动等。

有一个模式允许用户更改特定日期的时间。目前,我已经设置了在用户更改时间时刷新页面,就像网格更新一样。

我想在不刷新页面的情况下添加或删除必要的时间行。不确定如何对这个进行数学运算..我确信它有可能。

组织者是一个受PW保护的应用程序的背后,但如果你们仍然不明白这个问题,我可以尝试将小提琴放在一起。 (让它在没有服务器的情况下运行会很困难且耗时)。

这是我当前的保存日功能:

 saveEditDay: function(clicked){
        var fm = $('.edit-day-form');
        if(fm.valid()){
            $.ajax({
                type: "PUT",
                url: '<?=URL::to_action("api.day")?>/' + day_buttons.dayId,
                data: fm.serialize(),
                success: function(dayObject){
                    console.log('changing the button');
                    //only "current" day can be edited, so:
                    dayObject.is_current = true;
                    $('#day-btn-'+dayObject.id).replaceWith(ich.day_btn(dayObject));
                    $('.edit_header time').attr('datetime',dayObject.happens_at).text(dayObject.date_long);
                    //console.log(dayObject)
                    $('.days').trigger('change');
                    $('#edit_day_modal').modal('hide');  

                    //day_buttons.removeHourRows(dayObject)

                    //Temporary fix for showing new day times on save.
                    window.location = window.location.pathname;
                }
            });
        }
    },

以下是我尝试添加/删除tr的日历的代码:

http://jsfiddle.net/5QFAw/6/

1 个答案:

答案 0 :(得分:0)

根据进一步的了解,这可能是你想要的:

$(function () {
    var foo = function (t) {  // t = the input of user
        $(".YourTBodyClass tr").each(function () { // Assign a specific class to your tobody, or if you just want to deal with one table then id will be fine as well

            if ($(this).attr("data-val") < t) { // I assume you can assign a "int" data-val to each tr with 8,9,10....24. 
                                                // Of couse you can also try compare with the data-id you have in your jsfiddle, it's just slightly more complicated.
                                                // If data-val is used, you can use other unobtrusive val

                $(this).css("display", "none"); // I will prefer to just hide the tr rather than wipe, so that you don't need to worry about recreating it

            } else {

                $(this).css("display", "block");

            }
        });
    };
});

在js中查看评论,如果您有任何疑问,请与我们联系。

再次好运。