在hover时调整内容的垂直对齐方式
我在这里遇到了一个有趣的问题：
有一个桌子上有几个单元格，其中一些有rowpans：
+----+----+----+----+ | | | c4 | cx | | | c2 +----+----+ | | | c5 | cx | | c1 +----+----+----+ | | | c6 | cx | | | c3 +----+----+ | | | c7 | cx | +----+----+---------+ 当我将鼠标hover在一行上时，可以说第一行，我想显示它是这样的
+----+----+----+----+ | c1 | c2 | c4 | cx | | | +----+----+ | | | c5 | cx | | +----+----+----+ | | | c6 | cx | | | c3 +----+----+ | | | c7 | cx | +----+----+---------+
所以基本上，rowspan单元格的值与突出显示的行显示在同一行上。
这是一个突出工作的jsfiddle： https ：//jsfiddle.net/ucarL9e9/1/
因此，每当我突出显示一行时，我想暂时更改单元格的垂直对齐方式，使其与突出显示的行一起使用。 所以这样的事情：
我不担心颜色只是细胞的价值。
编辑
我在这里工作了一些东西，但只希望rowpan在其范围内
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('Long Text'); } $(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%; }
正如所承诺的，这里有更复杂的东西。
下面的设置确保如上所述：
如果突出显示第三行，则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; }
Text 1A LONG text Text 1B Text 1C Text 2A Text 2B Text 2C Text 3A Text 3B Text 3C Text 4A Text 4B Text 4C Text 5A Text 5B Text 5C Text 6A Text 6B Text 6C Text 7A Text 7B Text 7C Text 8A Text 8B Text 8C Text 9A Text 9B Text 9C Text 10A Text 10B Text 10C Text 11A Text 11B Text 11C Text 12A Text 12B Text 12C Text 13A Text 13B Text 13C Text 14A Text 14B Text 14C Text 15A Text 15B Text 15C Text 16A Text 16B Text 16C Text 17A Text 17B Text 17C Text 18A Text 18B Text 18C Text 19A Text 19B Text 19C Text 20A Text 20B Text 20C Text 21A Text 21B Text 21C Text 22A Text 22B Text 22C Text 23A Text 23B Text 23C Text 24A Text 24B Text 24C Text 25A Text 25B Text 25C Text 26A Text 26B Text 26C Text 27A Text 27B Text 27C Text 28A Text 28B Text 28C Text 29A Text 29B Text 29C Text 30A Text 30B Text 30C Text 31A Text 31B Text 31C Text 32A Text 32B Text 32C Text 33A Text 33B Text 33C Text 34A Text 34B Text 34C Text 35A Text 35B Text 35C Text 36A Text 36B Text 36C Text 37A Text 37B Text 37C Text 38A Text 38B Text 38C
当您将鼠标hover在第一行上时，您是否只希望在包含rowspan属性的列中发生此行为？
如果是这样，您只需要：
tr:nth-of-type(1):hover td[rowspan] { vertical-align: top; }
啊，等等，我已经看到了你的更新。 这种行为必须发生在每一行，对吧？
让我想出更复杂的东西……