Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 09.09.2011, 01:42
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Зачем тут вообще селекторы? У элементов таблицы есть коллекции rows, cells и свойства rowIndex, cellIndex. А еще есть тег <col>, специально для оформления столбцов.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>table</title>
    <style>
        table {
            border-collapse: collapse;
        }
        td {
            padding: 10px;
            border: 1px solid #000;
        }
        .highlight {
            background: #fcc;
        }
    </style>
</head>
<body>
    <table>
        <colgroup>
            <col>
            <col>
            <col>
            <col>
            <col>
        </colgroup>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script>
        $("table").each(function () {

            var $highlighted, $cols = $("col", this);

            function highlight(index) {
                unhighlight();
                $highlighted = $cols.eq(index).addClass("highlight");
            }

            function unhighlight() {
                if ($highlighted) {
                    $highlighted.removeClass("highlight");
                }
            }

            $(this).bind({
                mousemove: function (event) {
                    var target = event.target;
                    if ("cellIndex" in target) {
                        highlight(target.cellIndex);
                    }
                },
                mouseout: unhighlight
            });

        });
    </script>
</body>
</html>


Только в процессе написания выяснилось, что Opera 11.51 не поддерживает динамическое добавление CSS-класса для <col>

---------
а не прочитал про col выше

Последний раз редактировалось Octane, 09.09.2011 в 01:47.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать чтобы кнопка выделялась при наведении курсора Krest_xxx Общие вопросы Javascript 2 28.08.2011 20:36
изменения рисунка при наведении курсора Kenan Bek Events/DOM/Window 24 19.12.2010 20:48
Как изменить текст при наведении курсора? sewernik Элементы интерфейса 2 13.04.2009 19:31
Как сделать ссылку картинку, которая изменяется при наводе курсора на неё? Кирилл Общие вопросы Javascript 2 10.03.2009 15:14
Всплывающее окошко, как подсказка при наведении на кнопку. rastafaray Общие вопросы Javascript 4 24.05.2008 00:55