悬停时调整内容的垂直对齐 [英] Adjust vertical alignment of content upon hover

查看：109
本文介绍了悬停时调整内容的垂直对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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



有一个有少数单元格的表，其中一些有行跨：

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


$ b b

当我将鼠标悬停在第一行时，我要显示它。

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


$ b b

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



这里是一个jsfiddle与突出工作：



我不用担心颜色只是细胞的价值。



EDIT



我在这里工作，但只希望rowspan在其跨度



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



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

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


解决方案

如所承诺的，这里是更复杂的。



下面的设置确保， / p>


如果您突出显示第三行，则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  

  .hoverTable {width：100％; border-collapse：collapse; } .hoverTable td {padding：7px; border：＃4e95f4 1px solid;} / *定义所有表行的默认颜色* /。hoverTable tr {background：＃b8d1f3;} / *定义表格行的悬停高亮颜色* /。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>文字1A< / td>< td rowspan =37>长文字< / td>< td>文字1B< / td>< td>文字1C< / td>< / tr> < tr>< td>文字2A< / td>< td>文字2B< / td>< td>文字2C< / td> < tr>< td>文字3A< / td>< td>文字3B< / td>< td>文字3C< / td>< / tr> < tr>< td>文字4A< / td>< td>文字4B< / td>< td>文字4C< / td>< / tr> < tr>< td>文字5A< / td>< td>文字5B​​< / td>< td>文字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>文字9A< / td>< td>文字9B< / td>< td>文字9C< / td>< / tr>< / tr> < tr>< td>文字10A< / td>< td>文字10B< / td>< td>文字10C< / td>< / tr>< / tr> < tr>< td>文字11A< / td>< td>文字11B< / td>< td>文字11C< / td>< / tr> < tr>< td>文字12A< / td>< td>文字12B< / td>< td>文字12C< / td>< / tr>< / tr> < tr>< td>文字13A< / td>< td>文字13B< / td>< td>文字13C< / td>< / tr> < tr>< td>文字14A< / td>< td>文字14B< / td>< td>文字14C< / td>< / tr> < tr>< td>文字15A< / td>< td>文字15B< / td>< td>文字15C< / td>< / tr> < tr>< td>文字16A< / td>< td>文字16B< / td>< td>文字16C< / td>< / tr> < tr>< td>文字17A< / td>< td>文字17B< / td>< td>文字17C< / td>< / tr> < tr>< td>文字18A< / td>< td>文字18B< / td>< td>文字18C< / td>< / tr> < tr>< td>文字19A< / td>< td>文字19B< / td>< td>文字19C< / td>< / tr> < tr>< td>文字20A< / td>< td>文字20B< / td>< td>文字20C< / td>< / tr> < tr>< td>文字21A< / td>< td>文字21B< / td>< td>文字21C< / td>< / tr> < tr>< td>文字22A< / td>< td>文字22B< / td>< td>文字22C< / td>< / tr> < tr>< td>文字23A< / td>< td>文字23B< / td>< td>文字23C< / td>< / tr> < tr>< td>文字24A< / td>< td>文字24B< / td>< td>文字24C< / td>< / tr> < tr>< td>文字25A< / td>< td>文字25B< / td>< td>文字25C< / td>< / tr> < tr>< td>文字26A< / td>< td>文字26B< / td>< td>文字26C< / td>< / tr> < tr>< td>文字27A< / td>< td>文字27B< / td>< td>文字27C< / td>< / tr>< / tr> < tr>< td>文字28A< / td>< td>文字28B< / td>< td>文字28C< / td>< / tr> < tr>< td>文字29A< / td>< td>文字29B< / td>< td>文字29C< / td>< / tr> < tr>< td>文字30A< / td>< td>文字30B< / td>< td>文字30C< / td& < tr>< td>文字31A< / td>< td>文字31B< / td>< td>文字31C< / td>< / tr>< / tr> < tr>< td>文字32A< / td>< td>文字32B< / td>< td>文字32C< / td>< / tr> < tr>< td>文字33A< / td>< td>文字33B< / td>< td>文字33C< / td>< / tr> < tr>< td>文字34A< / td>< td>文字34B< / td>< td>文字34C< / td>< / tr> < tr>< td>文字35A< / td>< td>文字35B< / td>< td>文字35C< / td>< / tr> < tr>< td>文字36A< / td>< td>文字36B< / td>< td>文字36C< / td& < tr>< td>文字37A< / td>< td>文字37B< / td>< td>文字37C< / td& < tr>< td>文字38A< / td>< td rowspan =1>< / td>< td>文字38B< / td>< td>文字38C< / td& ; / tr>< / table>


I've got an interesting problem here:

There is a table with a handful of cells, some of them have rowspans:

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

When I hover over a row lets say the first row, I want to display it something like this

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

So basically the values of the rowspan cells appear on the same row as the highlighted row.

Here is a jsfiddle with the highlighting working: https://jsfiddle.net/ucarL9e9/1/

So whenever I highlight a row I want to temporary change the vertical alignment of the cell to make it with the row that highlighted. So something like this:

I'm not worried about the color just the value of the cell.

EDIT

I got something working here but only want rowspan to be within its span

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

So when I highlight the last row in the previous example in should be like this

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

解决方案

As promised, here is something more sophisticated.

The setup below ensures that, as you state above:

If you highlight the third row, LONG text should be in the third row.

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>

这篇关于悬停时调整内容的垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆