JqueryUi可以通过上下文菜单选择

Question

我将上下文菜单和可选的Jquery-UI应用于表。我要达到的目的是，如果我在选定的单元格之外单击鼠标右键，则所选单元格应消失，而右键单击的当前单元格应突出显示。

我尝试通过从可选元素中删除ui选择的类来进行此操作，但没有用。 这是JS Fiddle link.

我该如何继续进行下去。

 $("tbody").selectable({
 //filter: 'td',

 filter: '.rosterCell',
 //stop: function() {
 // var result = $("#select-result").empty();
 // $(".ui-selected", this).each(function() {
 //   //result.append(" #" + ($(this).attr("value")));
 //   result.append( $(this).text() );
 //   
 // });
 // //console.log(result);
//},
selected: function(event, ui) {
    // Mark cell as selected.
    //console.log(ui);
    //console.log(ui.selected);
    //console.log("cellIndex: ",ui.selected.cellIndex);
    //console.log("rowIndex: ",ui.selected.dataset.rowindex);
    colIndex = ui.selected.cellIndex -1;
    rowIndex = ui.selected.dataset.rowindex;

    foo[rowIndex][colIndex]= true;
    for(let row = 0; row<foo.length; row++){
       for (let col = 0; col<foo[row].length; col++){
          if (foo[row][col] == true){
            console.log(row,col,"selected");
          }
       }
    }
    //console.log(foo);
},
unselected: function(event, ui) {
    // Unmark cell as selected
    foo = [[false,false,false,false],[false,false,false,false],[false,false,false,false],[false,false,false,false],[false,false,false,false]];
    //console.log("UNSELECTED: " + $(this).text());
}
    });