我这里有一个有趣的问题:
有一个包含少量单元格的表格,其中一些具有行跨度:
+----+----+----+----+
| | | c4 | cx |
| | c2 +----+----+
| | | c5 | cx |
| c1 +----+----+----+
| | | c6 | cx |
| | c3 +----+----+
| | | c7 | cx |
+----+----+---------+
当我将鼠标悬停在一行上(比如说第一行)时,我想将其显示为如下所示
+----+----+----+----+
| c1 | c2 | c4 | cx |
| | +----+----+
| | | c5 | cx |
| +----+----+----+
| | | c6 | cx |
| | c3 +----+----+
| | | c7 | cx |
+----+----+---------+
所以基本上,行跨度单元格的值与突出显示的行出现在同一行上。
这是一个突出显示的jsfiddle: https://jsfiddle.net/ucarL9e9/1/
因此,每当我突出显示一行时,我想临时更改单元格的垂直对齐方式,使其与突出显示的行对齐。所以像这样:
我不担心颜色,只担心单元格的值。
编辑
我在这里工作,但只希望行跨度在其跨度内
http://jsfiddle.net/jbb3f8yf/5/
所以当我突出显示上一个示例中的最后一行时应该是这样的
+----+----+----+----+
| | | c4 | cx |
| | c2 +----+----+
| | | c5 | cx |
| +----+----+----+
| | | c6 | cx |
| | +----+----+
| c1 | c3 | c7 | cx |
+----+----+---------+
最佳答案
您可以使用 JQuery 来完成此操作
<强> DEMO
JS
$('tr > td').each(function() {
var top = $(this).offset().top;
if($(this).is('[rowspan]')) {
$(this).html('<span>Long Text</span>');
}
$(this).hover(function() {
$('td[rowspan="45"] span').css('top', top);
$('td[rowspan="45"]').css('background', '#ffff99');
}, function() {
$('td[rowspan="45"] span').css('top', 0);
$('td[rowspan="45"]').css('background', '#b8d1f3');
});
});
CSS
td[rowspan="45"] {
position: relative;
}
td[rowspan="45"] span {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
关于javascript - 调整悬停时内容的垂直对齐方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34097672/