我想突出顯示類活動的單元格的邊框.
問題是表的border-collapse屬性設定為折疊,這将隐藏單元格的頂部和左側邊框(最左側和頂部行單元格除外).這導緻一個問題,即突出顯示類(活動)不突出顯示頂部和左側邊框.
你可以找到問題here.
HTML
| 1.1 | 1.2 | 1.3 | 1.4 | 1.5 |
| 2.1 | 2.2 | 2.3 | 2.4 | 2.5 |
| 3.1 | 3.2 | 3.3 | 3.4 | 3.5 |
| 4.1 | 4.2 | 4.3 | 4.4 | 4.5 |
| 5.1 | 5.2 | 5.3 | 5.4 | 5.5 |
CSS
table {
table-layout: fixed;
border-spacing: 0;
border-collapse: collapse;
}
td {
border: 1px solid lightgrey;
height: 60px;
width: 60px;
text-align: center;
vertical-align: middle;
}
td.active {
border: 1px solid blue;
}
td.brdr-b-hide {
border-bottom: none;
}
td.brdr-r-hide {
border-right: none;
}
使用Javascript
$('table').on('click', 'td', function(e){
var target = $(e.currentTarget);
if(e.ctrlKey && target.hasClass('active')){
target.removeClass('active');
} else if(e.ctrlKey) {
target.addClass('active');
} else {
$('table td.active').removeClass('active');
target.addClass('active');
}
});
我正在研究的解決方案之一是隐藏活動單元格左側單元格的右邊界和頂部單元格的邊界底部.
我對解決方案不太滿意,因為在單擊單元格時應用并删除了活動類.在這裡,我的解決方案需要找到prev單元格和頂部單元格,并在其中應用/删除相應的類.
您可以找到建議的解決方案here.
我的問題是,有沒有更好的方法來處理這個問題？