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

时间：2015-12-07 16:00:17

标签： javascript jquery css

我在这里遇到了一个有趣的问题：

有一个包含少量单元格的表格，其中一些单元格有行间距：

+----+----+----+----+
|    |    | 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/

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

enter image description here

我并不担心细胞的颜色。

修改

我在这里工作了但只希望rowpan在其范围内

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

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

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

3 个答案:

答案 0 :(得分：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%;
}

答案 1 :(得分：1)

正如所承诺的，这里有更复杂的东西。

以下设置可确保您如上所述：

  

如果突出显示第三行，则LONG文本应位于第三行。

var activateTableRows = [];

function activateTableRow(i) {
var hoverTable = document.getElementsByClassName('hoverTable')[0];
var tableRows = document.getElementsByTagName('tr');
var upperTableData = tableRows[0].getElementsByTagName('td')[1];
var lowerTableData = document.querySelectorAll('td[rowspan]')[1];
var longText;
var newLowerRow;
var afterNewLowerTableData;

if (i > 0) {
    newLowerRow = tableRows[i];
    afterNewLowerTableData = newLowerRow.getElementsByTagName('td')[1];
    newLowerRow.insertBefore(lowerTableData,afterNewLowerTableData);

	if (upperTableData.innerHTML !== '') {
	    longText = upperTableData.innerHTML;
	    upperTableData.innerHTML = '';
	    lowerTableData.innerHTML = longText;
	    }

    	upperTableData.rowSpan = i;
    	lowerTableData.rowSpan = (tableRows.length - i);
    }

else {
    newLowerRow = tableRows[(tableRows.length - 1)];
    	afterNewLowerTableData = newLowerRow.getElementsByTagName('td')[1];
    	newLowerRow.insertBefore(lowerTableData,afterNewLowerTableData);

    if (lowerTableData.innerHTML !== '') {	
	    longText = lowerTableData.innerHTML;
	    upperTableData.innerHTML = longText;
	    lowerTableData.innerHTML = '';
	    }

    upperTableData.rowSpan = (tableRows.length - 1);
    lowerTableData.rowSpan = 1;
    }
}


function activateTableRowFunction(i) {
	return function(){
        var tableRows = document.getElementsByTagName('tr');
        tableRows[i].addEventListener('mouseover',function(){activateTableRow(i);},false);
    }
}

function initiateTableRowsFunction() {
    var tableRows = document.getElementsByTagName('tr');
    for (var i = 0; i < tableRows.length; i++) {
        activateTableRows[i] = activateTableRowFunction(i);
        activateTableRows[i]();
    }
}

window.onload = initiateTableRowsFunction();
.hoverTable {
width:100%; 
border-collapse: collapse; 
}

.hoverTable td { 
padding:7px; border:#4e95f4 1px solid;
}

/* Define the default color for all the table rows */
.hoverTable tr {
background: #b8d1f3;
}

/* Define the hover highlight color for the table row */
.hoverTable tr:hover {
background-color: #ffff99;
}

.hoverTable:hover td[rowspan] {
background-color: #ffff99;
}

.hoverTable td[rowspan] {
vertical-align: top;
border-width: 0 1px;
}
<table class="hoverTable">
<tr>
<td>Text 1A</td>
<td rowspan="37">LONG text</td>
<td>Text 1B</td>
<td>Text 1C</td>
</tr>
  
<tr>
<td>Text 2A</td>
<td>Text 2B</td>
<td>Text 2C</td>
</tr>
  
<tr>
<td>Text 3A</td>
<td>Text 3B</td>
<td>Text 3C</td>
</tr>
  
<tr>
<td>Text 4A</td>
<td>Text 4B</td>
<td>Text 4C</td>
</tr>
  
<tr>
<td>Text 5A</td>
<td>Text 5B</td>
<td>Text 5C</td>
</tr>
  
<tr>
<td>Text 6A</td>
<td>Text 6B</td>
<td>Text 6C</td>
</tr>
</tr>
  
<tr>
<td>Text 7A</td>
<td>Text 7B</td>
<td>Text 7C</td>
</tr>
</tr>
  
<tr>
<td>Text 8A</td>
<td>Text 8B</td>
<td>Text 8C</td>
</tr>
</tr>
  
<tr>
<td>Text 9A</td>
<td>Text 9B</td>
<td>Text 9C</td>
</tr>
</tr>
  
<tr>
<td>Text 10A</td>
<td>Text 10B</td>
<td>Text 10C</td>
</tr>
</tr>
  
<tr>
<td>Text 11A</td>
<td>Text 11B</td>
<td>Text 11C</td>
</tr>
  
<tr>
<td>Text 12A</td>
<td>Text 12B</td>
<td>Text 12C</td>
</tr>
</tr>
  
<tr>
<td>Text 13A</td>
<td>Text 13B</td>
<td>Text 13C</td>
</tr>
  
<tr>
<td>Text 14A</td>
<td>Text 14B</td>
<td>Text 14C</td>
</tr>
  
<tr>
<td>Text 15A</td>
<td>Text 15B</td>
<td>Text 15C</td>
</tr>
  
<tr>
<td>Text 16A</td>
<td>Text 16B</td>
<td>Text 16C</td>
</tr>
  
<tr>
<td>Text 17A</td>
<td>Text 17B</td>
<td>Text 17C</td>
</tr>
  
<tr>
<td>Text 18A</td>
<td>Text 18B</td>
<td>Text 18C</td>
</tr>
  
<tr>
<td>Text 19A</td>
<td>Text 19B</td>
<td>Text 19C</td>
</tr>
  
<tr>
<td>Text 20A</td>
<td>Text 20B</td>
<td>Text 20C</td>
</tr>
  
<tr>
<td>Text 21A</td>
<td>Text 21B</td>
<td>Text 21C</td>
</tr>
  
<tr>
<td>Text 22A</td>
<td>Text 22B</td>
<td>Text 22C</td>
</tr>
  
<tr>
<td>Text 23A</td>
<td>Text 23B</td>
<td>Text 23C</td>
</tr>
  
<tr>
<td>Text 24A</td>
<td>Text 24B</td>
<td>Text 24C</td>
</tr>
  
<tr>
<td>Text 25A</td>
<td>Text 25B</td>
<td>Text 25C</td>
</tr>
  
<tr>
<td>Text 26A</td>
<td>Text 26B</td>
<td>Text 26C</td>
</tr>
  
<tr>
<td>Text 27A</td>
<td>Text 27B</td>
<td>Text 27C</td>
</tr>
</tr>
  
<tr>
<td>Text 28A</td>
<td>Text 28B</td>
<td>Text 28C</td>
</tr>
  
<tr>
<td>Text 29A</td>
<td>Text 29B</td>
<td>Text 29C</td>
</tr>
  
<tr>
<td>Text 30A</td>
<td>Text 30B</td>
<td>Text 30C</td>
</tr>
  
<tr>
<td>Text 31A</td>
<td>Text 31B</td>
<td>Text 31C</td>
</tr>
</tr>
  
<tr>
<td>Text 32A</td>
<td>Text 32B</td>
<td>Text 32C</td>
</tr>
  
<tr>
<td>Text 33A</td>
<td>Text 33B</td>
<td>Text 33C</td>
</tr>
  
<tr>
<td>Text 34A</td>
<td>Text 34B</td>
<td>Text 34C</td>
</tr>
  
<tr>
<td>Text 35A</td>
<td>Text 35B</td>
<td>Text 35C</td>
</tr>
  
<tr>
<td>Text 36A</td>
<td>Text 36B</td>
<td>Text 36C</td>
</tr>
  
<tr>
<td>Text 37A</td>
<td>Text 37B</td>
<td>Text 37C</td>
</tr>
  
<tr>
<td>Text 38A</td>
<td rowspan="1"></td>
<td>Text 38B</td>
<td>Text 38C</td>
</tr>
</table>

答案 2 :(得分：0)

当您将鼠标悬停在第一行上时，是否只希望在包含rowspan属性的列中出现此行为？

如果是这样，您只需要：

tr:nth-of-type(1):hover td[rowspan] {
vertical-align: top;
}

啊，等等，我看到了你的更新。这种行为必须发生在每一行，对吗？

让我想出更复杂的东西......

相关问题
最新问题