Как работать с `rowspan` и фоновыми цветами внутри таблицы?

Question

У меня есть общая таблица HTML с некоторыми стилями цвета фона CSS.Когда пользователь наводит указатель мыши на строку, цвет фона всех ячеек в этой строке меняется на светло-серый.

У меня есть ячейка в верхнем ряду, которая занимает три строки.Когда я наводю курсор на верхний ряд, ячейка закрашивается соответствующим образом.Однако при наведении курсора на второй и третий ряды ячейка не затеняется.

Можно ли закрасить ячейку во 2-м или 3-м ряду?Как мне это сделать?

Соответствующий код:

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

Это может быть выполнено с использованием 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.Кстати, вы можете упростить приведенный выше JavaScript с помощью jQuery - это сэкономит вам немного времени на набор текста.

Best, Kamran

Answer 2

Я воспринял ответ thesocialgeek как подтверждение того, что нет реализации только для CSS и что это лучший подход в JS.

Но я реализовал его более общим способом, поэтомукод может войти в центральный сценарий JS для всего моего сайта.Это должно решить проблему для любой ячейки таблицы с определением rowspan.

Это мой CSS:

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

Обычная строка таблицы будет зависеть от CSS':hover псевдокласс.Любая строка, а также <th> s и <td> s будет зависать принудительно при добавлении класса .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.

Проблема, которую еще предстоит решить: На моей странице слушатели событий вызываются три раза каждый.Я не знаю точно, почему.Это немного бесполезно, но код не такой толстый, как я не мог этого игнорировать.

Я тестировал код только в Firefox 22 с jQuery 2.0.3, где результат совершенно не соответствует предполагаемому.

Обновление: Я нашел это полезным и расширил код, чтобы выделить все строки, связанные с ячейкой rowspan, когда эта ячейка наведена.Добавьте следующий фрагмент к длинной функции выше:

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

Answer 3

Какие браузеры тестируются? Работает ли пример, если вы удалите rowspan = 3 TD? (Если это так, это довольно баг / фича.)

Еще один способ сделать это - использовать скрипт для изменения имени класса в TR.

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

Возможно, в этом случае это действительно необходимо.