Adjust vertical alignment of content upon hover

Question

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

Answer 1

You can do this using 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%;
}

Answer 2

Do you only want this behaviour to occur in columns which contain a rowspan attribute when you hover over the first row?

If so, you simply need:

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

Ah, wait, I've seen your update. This behaviour has to occur for every row, right?

Let me come up with something more sophisticated...

Answer 3

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>