Jquery UI 选择table table 单元格轮廓

Question

好的，所以我正在使用 Jquery UI Selectable 来突出显示 table 中的一些单元格。我希望能够使用 2px 边框在突出显示的单元格周围添加边框。这样，每次突出显示一个部分时，您都可以区分突出显示的每个部分。我也希望我能用重叠的部分来实现这个结果。

我读了很多书，还没有真正看到有人尝试这样做。所以我想知道是否有人可以为我指出正确的方向来实现这种效果。

下面是我的示例 fiddle 和一些代码。

var shadeColor = $(".color-pallet > .active").css("background-color");

applySelectable = function() {
    $(".block-tools > .shade-btn").click(function() {
        var $this = $(this);    

        if (!$this.hasClass("active")) {
            $this.siblings().removeClass("active");
            $this.addClass("active");   
        }
    });

    $(".color-pallet > span").click(function() {
        var $this = $(this);

        if (!$this.hasClass("active")) {
            $this.siblings().removeClass("active");
            $this.addClass("active");   

            shadeColor = $(this).css("background-color");
        }
    });

    // keep selected shade color selected after new question
    if (shadeColor !== $(".color-pallet > .active")) {
        $(".color-pallet > span").filter(function(){
            var color = $(this).css("background-color");
            if (color === shadeColor) {
                $(this).click();    
            };
        });
    }

    $(".blocks").bind("mousedown", function(e) {
        e.metaKey = true;
    }).selectable({
        filter: "td",
        selecting: function (event, ui) {
            if ($('.block-shade').hasClass("active")) {
                $(ui.selecting).addClass('marked').css("background-color", shadeColor);
            } else {
                $(ui.selecting).removeClass('marked').css("background-color", "");
            }
            userAns = $('.marked').length+"";
        }
    });
};

applySelectable();

预先感谢您的宝贵时间。

编辑： 对于奖励积分，有人可以告诉我当我拖动选择时，为什么容器高度会增加并创建滚动条？这已经严重困扰了我一段时间，我选择忽略它，但我想当我在这里时，也许有人也可以解释一下？

Answer 1

嗯...这是某种解决方案，我添加了 4 css 类和一些丑陋的代码...但它正在工作...

$(".blocks").bind("mousedown", function(e) {
            e.metaKey = true;
        }).selectable({
            filter: "td",
            selecting: function (event, ui) {
                if ($('.block-shade').hasClass("active")) {
                    $(ui.selecting).addClass('marked').css("background-color", shadeColor);
                    $(ui.selecting).addClass('top');
                     $(ui.selecting).addClass('left');
                     $(ui.selecting).addClass('bottom');
                     $(ui.selecting).addClass('right');
                    if($(ui.selecting).prev().hasClass('marked')) {
                       $(ui.selecting).removeClass('left');
                        $(ui.selecting).prev().removeClass('right');
                       }
                      if($(ui.selecting).next().hasClass('marked')) {
                       $(ui.selecting).removeClass('right');
                        $(ui.selecting).next().removeClass('left');
                       }

                    top_elem=$(ui.selecting).parent().prev('tr').find('td');
                     // console.log(top_elem);


                        $(top_elem).each(function(i) {
                             if($(this).hasClass('marked')) {
                            if($(this).offset().left==$(ui.selecting).offset().left) 
                            {
                                $(this).removeClass('bottom');
                        $(ui.selecting).removeClass('top'); 
                            }

                    }   
                        });

                    bottom_elem=$(ui.selecting).parent().next('tr').find('td');


                        $(bottom_elem).each(function(i) {
                            if($(this).hasClass('marked')) {
                            if($(this).offset().left==$(ui.selecting).offset().left) 
                            {
                                $(this).removeClass('top');
                        $(ui.selecting).removeClass('bottom'); 
                            }
                          }
                    });



                } else {
                    $(ui.selecting).removeClass('marked').css("background-color", "");
                     $(ui.selecting).removeClass('top');
                     $(ui.selecting).removeClass('left');
                     $(ui.selecting).removeClass('bottom');
                     $(ui.selecting).removeClass('right');
                }
                userAns = $('.marked').length+"";
            }
        });
    };

    applySelectable();
});

演示：http://jsfiddle.net/wh2ehzo3/10/

但是，如果您想在重叠部分保留边框，那么重叠确实非常棘手。测试...（仅保存两个形状的外边框，希望您明白我的意思）

思路：检查siblings -> 相应地移除类，如果有.marked元素，检查上下行 -> 做同样的...

Jquery UI 选择table table 单元格轮廓

Jquery UI selectable table cell outline

javascript

css

jquery

jquery-ui

selectable