我有一个带有可选单元格的表格（通过 jQuery-UI 可选）。通过 cmd/ctrl 单击和通过套索单独选择单元格。选定的单元格获得“ui-selected”类。我通过向该类添加 1 像素厚的橙色边框来设置选择的样式。 This looks silly when contiguous cells are selected.请看这个小提琴来玩它：http://jsfiddle.net/derekprior/UxwD4/
我想做的是仅在相邻单元格未被选中的一侧绘制橙色边框。相邻我的意思是在同一行和上下行。结果应该是围绕整个连续选择的单个轮廓。
这可以用纯 CSS 完成吗？ CSS3 选择器是公平的游戏，只要它们在 Firefox、Chrome 和 Safari 中得到足够好的支持。如果没有，那么 Javascript 怎么样？
【问题讨论】：
标签： javascript jquery jquery-ui css
$(function(){
$("tbody").selectable({
filter: 'td:not(.user)',
stop: doIt
});
var cssClass = "ui-selected";
var withBorder = "1px solid #F39814";
var noBorder = "1px solid #dddddd";
function doIt(){
$("td").css("border", noBorder);
$("td." + cssClass).each(function(){
var $this = $(this);
var col = $this.index();
$this.css("border", withBorder);
if($this.prev().hasClass(cssClass)){
$this.css("border-left", noBorder);
}
if($this.next().hasClass(cssClass)){
$this.css("border-right", noBorder);
}
if($this.parent()
.prev()
.children().eq(col)
.hasClass(cssClass)){
$this.css("border-top", noBorder);
}
if($this.parent()
.next()
.children().eq(col)
.hasClass(cssClass)){
$this.css("border-bottom", noBorder);
}
});
}
});
【讨论】：
这不能用纯 CSS 来完成（至少在没有 JavaScript 操作的情况下不能），但是用 jQuery（因为你已经在使用 jQuery UI 库）：
$('td').click(
function(){
if ($(this).prev('td').hasClass('ui-selected')){
$(this).css('border-left-color','transparent');
$(this).prev('td').css('border-right-color','transparent');
}
else if ($(this).next('td').hasClass('ui-selected')){
$(this).css('border-right-color','transparent');
$(this).next('td').css('border-left-color','transparent');
}
});
【讨论】：
这只能使用 JavaScript 来完成。 selected 事件必须用于检测选择的结束。然后，检查上一行/下一行/单元格是否有selected 类。如果有，请添加一个类来处理相关边框。
看看代码，我用了描述性的名字。
小提琴：http://jsfiddle.net/UxwD4/11/
CSS：
.ui-border-top { border-top: #eee; }
.ui-border-right { border-right: #eee; }
.ui-border-bottom { border-bottom: #eee; }
.ui-border-left { border-left: #eee; }
JavaScript：
$("tbody").selectable({
filter: 'td:not(.user)',
selected: function(){
$('td.ui-selectee', this).each(function(){
var cell = $(this),
row = cell.parent(),
cellIndex = cell.index();
cell.removeClass('ui-border-top ui-border-right ui-border-bottom ui-border-left');
if (cell.hasClass('ui-selected')) {
var up = row.prev().children().eq(cellIndex).hasClass('ui-selected'),
right = cell.next().hasClass('ui-selected'),
down = row.next().children().eq(cellIndex).hasClass('ui-selected'),
left = cell.prev().hasClass('ui-selected');
if (up) cell.addClass('ui-border-top');
if (right) cell.addClass('ui-border-right');
if (down) cell.addClass('ui-border-bottom');
if (left) cell.addClass('ui-border-left');
}
});
}
});
【讨论】：
.children().eq() 必须使用而不是 .children()。请参阅我的更新答案。
.children(cellIndex)。只传递一个数字是无效的。您可以将其更改为 .children(":eq(... 或 .children().eq(...
http://jsfiddle.net/LuckyKind/3pXyX/
更多的 CSS，更少的 jQuery
td {
padding:1px
}
td.ui-selecting {
background: #FECA40 !important;
}
td:not(.ui-selected) + .ui-selected {
border-left: 1px solid #F39814 !important;
}
.ui-selected + td:not(.ui-selected) {
border-left: 1px solid #F39814 !important;
}
tr.row-selected + tr.row-selected td.ui-selected {
border-top: 1px solid #ddd !important;
}
tr:not(.row-selected) + tr.row-selected td.ui-selected {
border-top: 1px solid #F39814 !important;
}
tbody > tr.row-selected:first-child td.ui-selected {
border-top: 1px solid #F39814 !important;
}
tr.last-row-selected td.ui-selected {
border-bottom: 1px solid #F39814 !important;
}
然后是 jQuery...
$("tbody").selectable({
filter: 'td:not(.user)',
start: function(){
$('tr.last-row-selected').removeClass('last-row-selected');
},
stop: function(){
$('td.ui-selected:last',this).parent().addClass('last-row-selected');
$('tr.row-selected',this).removeClass('row-selected');
$('td.ui-selected',this).parent().addClass('row-selected');
}
});
【讨论】：