В этом уроке вы узнаете как с помощью CSS и jQuery сделать таблицу с чередующимися цветами ячеек и изменением цвета ячеек при наведении курсора мыши.
Пример таблицы http://flapps.ru/example/jquery/td-hove ... color.html
1. Код html страницы
Код: Выделить всё
<html><head><title>Цвет ячейки таблицы при наведении http://flapps.ru</title><link rel="stylesheet" href="style.css" type="text/css" /><script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script><script type="text/javascript" src="code.js"></script></head><body> <h1>Цвет ячейки таблицы при наведении</h1><table class="pretty"> <tr> <th style="width:250px;">Название</th> <th style="width:200px;">Тематика</th> <th style="width:150px;">Ссылка</th> </tr> <tr class="cl1"> <td>ВКонтакте API 3.0. Пример простого приложения </td> <td>Уроки по использованию ВКонтакте API</td> <td><a href="http://flapps.ru/forum/topic992.html">http://flapps.ru/forum/topic992.html</a></td> </tr> <tr class="cl2"> <td>IFrame-приложение ВКонтакте. Вывод информации о пользователе </td> <td>Уроки IFrame ВКонтакте</td> <td><a href="http://flapps.ru/forum/topic721.html">http://flapps.ru/forum/topic721.html</a></td> </tr> <tr class="cl1"> <td>Мой Мир API - Вывод информации о пользователе </td> <td>Уроки по использованию API других социальных сетей</td> <td><a href="http://flapps.ru/forum/topic602.html">http://flapps.ru/forum/topic602.html</a></td> </tr> <tr class="cl2"> <td>Создание флеш приложения для iPhone, iPod, iPad (Flash CS5) </td> <td>Уроки по созданию приложений для мобильных устройств</td> <td><a href="http://flapps.ru/forum/topic1655.html">http://flapps.ru/forum/topic1655.html</a></td> </tr> <tr class="cl1"> <td>Где скачать и как подключить jQuery</td> <td>Уроки jQuery</td> <td><a href="http://flapps.ru/forum/topic2662.html">http://flapps.ru/forum/topic2662.html</a></td> </tr> <tr class="cl2"> <td>Вывод данных из базы (PHP + MySQL) </td> <td>Уроки на другие темы</td> <td><a href="http://flapps.ru/forum/topic922.html">http://flapps.ru/forum/topic922.html</a></td> </tr> </table> </body></html>Код: Выделить всё
body { font-family: Arial, Verdana, sans-serif;}.pretty { border-collapse:collapse; width:600px; border-bottom:1px solid #666; margin: 10px auto;}.pretty th { border-bottom:1px solid #666; text-align:left; font-weight:normal; font-size:12px; padding:15px; background:#009dde;}.pretty td { text-align:left; font-size:12px; padding: 15px;}.pretty .cl1 td { background:#ededed;}.pretty .cl2 td { background:#ccc;}.pretty tr.over td { background:#2cbd1a;}Код: Выделить всё
$(function() { $(".pretty tr").mouseover(function() { $(this).addClass("over"); }).mouseout(function() { $(this).removeClass("over"); });});
