How to work with `rowspan` colors and background in a table?

Question

I have a generic HTML table with some CSS background color style. When the user hovers over a row, the background color of all the cells in that row changes to light gray.

I have a cell in my top row that spans three rows. When I hang the top row, the cell is shaded accordingly. However, when you hover over the second and third lines, the cell is not obscured.

Is it possible to shade a cell within the 2nd or 3rd row? How should I do it?

Relevant Code:

style.css

td {
    border: black 1px solid;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}

tr:hover td {
    background-color: #DDD;
}

th {
    border: none;
}

table.html

<tr>
    <td>Row 1:Col 1</td>
    <td>Row 1:Col 2</td>
    <td rowspan="3">Row 1/2/3:Col3</td>
</tr>
<tr>
    <td>Row 2:Col 1</td>
    <td>Row 2:Col 2</td>
</tr>
<tr>
    <td>Row 3:Col 1</td>
    <td>Row 3:Col 2</td>
</tr>

Answer 1

This can be done using JavaScript:

<style type="text/css">
td {
    border: black 1px solid;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px
}

tr:hover td {
    background-color: #DDDDDD;
}

th {
    border: none;
}

</style>
<script type="text/javascript">

function shadeCell( cellName )
{
    document.getElementById(cellName).style.backgroundColor = '#DDDDDD';
}

function unShadeCell( cellName )
{
    document.getElementById(cellName).style.backgroundColor = '';
}

</script>
<table>
<tr onMouseOver="shadeCell('bigCell')" onMouseOut="unShadeCell('bigCell')">
    <td>Row 1:Col 1</td>
    <td>Row 1:Col 2</td>
    <td rowspan="3" id="bigCell">Row 1/2/3:Col3</td>
</tr>
<tr onMouseOver="shadeCell('bigCell')" onMouseOut="unShadeCell('bigCell')">
    <td>Row 2:Col 1</td>
    <td>Row 2:Col 2</td>
</tr>
<tr onMouseOver="shadeCell('bigCell')" onMouseOut="unShadeCell('bigCell')">
    <td>Row 3:Col 1</td>
    <td>Row 3:Col 2</td>
</tr>
</table>

, , , HTML/CSS. Btw, JavaScript jQuery - .

,

Answer 2

? , rowspan = 3 TD? ( , /.)

- script TR.

td { background-color: #fff; }
.hover td { background-color: #ddd; }

, .

Answer 3

thesocialgeek , CSS JS.

, JS script . rowspan.

CSS:

tr.hover,
th.hover,
td.hover,
tr.hoverable:hover {
    background-color: grey;
}

CSS ':hover. , <th> <td> .hover. .

JS :

$(document).ready(function() {
    // find all <th>/<td> with rowspan in hoverable <tr>
    $('tr.hoverable [rowspan]').each(function(index, cell) {
        var $cell = $(cell);
        var rowspan = $cell.attr('rowspan');
        var limit = rowspan - 1; // :lt() is zero-based

        var $this_row  = $cell.closest('tr');
        var $next_rows = $this_row.nextAll('tr:lt(' + limit + ')');

        $next_rows.hover(
            function() {$cell.   addClass('hover')},
            function() {$cell.removeClass('hover')}
        );
    });
});

mouseenter mouseleave , rowspan. , , CSS.

: . . , , .

I tested the code only in Firefox 22 using jQuery 2.0.3, where the result is completely as expected.

Update: I found it useful and expanded the code to highlight all the lines associated with the cell rowspanwhen that cell freezes. Add the following snippet to the long function above:

        $cell.hover(
            function() {$next_rows.   addClass('hover')},
            function() {$next_rows.removeClass('hover')}
        );