Блог Евгения Петрова

jQuery. Разукрашиваем таблицу

Попутно с изучением CSS, решил приглядеться к библиотеке jQuery. Думаю Вам такая библиотека попадалась на глаза в просторах Интернета.

Простой пример, как с помощью данной библиотеки разукрасить таблицу через строчку:

$(document).ready( function () {

$("#table1 td:odd").css( "background-color" , "#ddd");//выбираем каждый второй элемент начиная с 0

$("#table4 tr:odd").css( "background-color" , "#ddd");

//$("table:odd").css( "background-color" , "#ddd");  //закрашиваем каждую 2-ю таблицу

}

);

И собственно сами таблицы:

Таблица 1.<table id="table1" border="1" width="250"><tr><td>Строка 1</td></tr><tr><td>Строка 2</td></tr><tr><td>Строка 3</td></tr><tr><td>Строка 4</td></tr><tr><td>Строка 5</td></tr><tr><td>Строка 6</td></tr><tr><td>Строка 7</td></tr><tr><td>Строка 8</td></tr><tr><td>Строка 9</td></tr><tr><td>Строка 10</td></tr></table>

Таблица 2.<table id="table1" border="1" width="250"><tr><td>Строка 1</td><td>Строка 1</td></tr><tr><td>Строка 2</td><td>Строка 1</td></tr><tr><td>Строка 3</td><td>Строка 1</td></tr><tr><td>Строка 4</td><td>Строка 1</td></tr><tr><td>Строка 5</td><td>Строка 1</td></tr><tr><td>Строка 6</td><td>Строка 1</td></tr><tr><td>Строка 7</td><td>Строка 1</td></tr><tr><td>Строка 8</td><td>Строка 1</td></tr><tr><td>Строка 9</td><td>Строка 1</td></tr><tr><td>Строка 10</td><td>Строка 1</td></tr></table>
Таблица 3.<table id="table1" border="1" width="400"><tr><td>Строка 1</td><td>Строка 1</td><td>Строка 1</td><td>Строка 1</td></tr><tr><td>Строка 2</td><td>Строка 1</td><td>Строка 1</td><td>Строка 1</td></tr><tr><td>Строка 3</td><td>Строка 1</td><td>Строка 1</td><td>Строка 1</td></tr><tr><td>Строка 4</td><td>Строка 1</td><td>Строка 1</td><td>Строка 1</td></tr><tr><td>Строка 5</td><td>Строка 1</td><td>Строка 1</td><td>Строка 1</td></tr><tr><td>Строка 6</td><td>Строка 1</td><td>Строка 1</td><td>Строка 1</td></tr><tr><td>Строка 7</td><td>Строка 1</td><td>Строка 1</td><td>Строка 1</td></tr><tr><td>Строка 8</td><td>Строка 1</td><td>Строка 1</td><td>Строка 1</td></tr><tr><td>Строка 9</td><td>Строка 1</td><td>Строка 1</td><td>Строка 1</td></tr><tr><td>Строка 10</td><td>Строка 1</td><td>Строка 1</td><td>Строка 1</td></tr></table>
Таблица 4.<table id="table4" border="1" width="400"><tr><td>Строка 1</td><td>Строка 1</td><td>Строка 1</td><td>Строка 1</td></tr><tr><td>Строка 2</td><td>Строка 1</td><td>Строка 1</td><td>Строка 1</td></tr><tr><td>Строка 3</td><td>Строка 1</td><td>Строка 1</td><td>Строка 1</td></tr><tr><td>Строка 4</td><td>Строка 1</td><td>Строка 1</td><td>Строка 1</td></tr><tr><td>Строка 5</td><td>Строка 1</td><td>Строка 1</td><td>Строка 1</td></tr><tr><td>Строка 6</td><td>Строка 1</td><td>Строка 1</td><td>Строка 1</td></tr><tr><td>Строка 7</td><td>Строка 1</td><td>Строка 1</td><td>Строка 1</td></tr><tr><td>Строка 8</td><td>Строка 1</td><td>Строка 1</td><td>Строка 1</td></tr><tr><td>Строка 9</td><td>Строка 1</td><td>Строка 1</td><td>Строка 1</td></tr><tr><td>Строка 10</td><td>Строка 1</td><td>Строка 1</td><td>Строка 1</td></tr></table>

Если Вы посмотрите демо, то увидите какого эффекта можно добиться манипулируя различными селекторами в jQuery.

Горизонтальное меню. Немного CSS

Вот небольшой примерчик создания симпатичного меню, используя список и немного CSS-стилей.

Сразу говорю что не претендую на гениальность и уникальность идеи, просто вплотную занялся изучением CSS.

Итак, вот наше меню:

<div  id="menu">
<ul>
 <li><a href="#">Главная</a></li>
 <li><a href="#">Статьи</a></li>
 <li><a href="#">Фотогалерея</a></li>
 <li><a href="#">Блог</a></li>
 <li><a href="#">Форум</a></li>
 <li><a href="#">Обратная связь</a></li>
</ul>
</div>

Далее применяем к элементам списка следующие стили:

#menu {
  white-space: nowrap;
  float: left;
  }

ul {
 float: left;
 list-style: none;
 margin: 0;
 padding: 0;
 }

li {display: block;
 float: left;
 }

li a {
 display: block;
 float: left;
 text-decoration: none;
 letter-spacing: 2px;
 padding: 10px;
 height: 20px;
 line-height: 20px;
 background-color: #bbb;
 text-align: center;
 color: black;
 font-family: Tahoma;
 font-weight: bold;
 font-size: 14px}

li a:hover {
   background-color: #ddd;
   cursor: pointer;
   }

.brd {
  border-right: 1px solid #999
  }

Получается довольно симпатичная менюшка с мелкими эффектами. Если поиграться со стилями, добавить графики, получается довольно неплохо.

Демо

Вот еще ссылочка на реализацию горизонтального меню с подменю: http://www.htmlbook.ru/css/hover.html