javascript - 悬停时调整内容的垂直对齐方式

Question

这里有一个有趣的问题:

有一张表格，其中包含一些单元格，其中一些单元格具有行跨度:

+----+----+----+----+
|    |    | c4 | cx |
|    | c2 +----+----+
|    |    | c5 | cx |
| c1 +----+----+----+
|    |    | c6 | cx |
|    | c3 +----+----+
|    |    | c7 | cx |
+----+----+---------+

当我将鼠标悬停在第一行上时，我想这样显示它

+----+----+----+----+
| c1 | c2 | c4 | cx |
|    |    +----+----+
|    |    | c5 | cx |
|    +----+----+----+
|    |    | c6 | cx |
|    | c3 +----+----+
|    |    | c7 | cx |
+----+----+---------+

基本上，rowspan 单元格的值出现在与突出显示的行相同的行上。

这是一个具有突出显示功能的 jsfiddle: https://jsfiddle.net/ucarL9e9/1/

因此，每当我突出显示一行时，我都想临时更改单元格的垂直对齐方式，使其与突出显示的行对齐。所以像这样:

我不担心颜色，只担心单元格的值。

编辑

我在这里做了一些工作，但只希望 rowspan 在其范围内

http://jsfiddle.net/jbb3f8yf/5/

所以当我在前面的例子中突出显示最后一行时应该是这样的

+----+----+----+----+
|    |    | c4 | cx |
|    | c2 +----+----+
|    |    | c5 | cx |
|    +----+----+----+
|    |    | c6 | cx |
|    |    +----+----+
| c1 | c3 | c7 | cx |
+----+----+---------+

Answer 1

您可以使用 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%;
}