当一天的开始和结束时间发生变化时，删除/<tr>添加正确的

Question

我已经创建了一个网格视图来组织事件的会话。这个网格在最左边的栏中以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/

Answer 1

根据进一步的理解，这可能是您想要的:

$(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中查看评论，如果有任何问题请告诉我。

祝你好运。