Полосатый список на JavaScript

Полосатый список
Бизнес блог Хабиба Омарова
Признаться при создании сайтов много раз сталкивался с проблемой не читабельности длинных списков, будь-то в таблице(<table>), списках(<ul>) или дивов(<div>).
Много искал в интернете легкий и кроссбраузерный вариант и к счастью нашел вот такой маленький скрипт.
Для начала нам необходимо подключить jQurey-библиотеку, если у ваш сайт находиться на какой нибудь системе управления (cms) то можете быть спокойными потому что она уже подключена заранее.
А если у вас статический html-сайт то вы можете ее скачать отсюда и подключить.
<script src="http://mysite.ru/js/jquery.js"></script>

Приступим к созданию списка в таблице:

<table id="tablelist">
	<tr>
	        <td>Название</td>
	        <td>Название</td>
	</tr>
	<tr>
	       <td>Название</td>
	       <td>Название</td>
	</tr>
</table>

Мы создали простую таблицу и задали ему идентификатор (id) вы можете задать любой другой. Теперь нам осталось прописать в javascript-е простой маленький такой скрипт:

<script>
	$('#tablelist tr:even').css('background-color','rgb(247, 247, 247');
</script>
Скрипт обращается к id таблице и выбирает все четные строки tr:even (tr:odd — все нечетные строки) и задает им css стиль бекграунда.
Вот собственно и все, таким способом можно задавать и таблицам и ul спискам не только фон но и любые параметры и теги.


Читайте также:

комментария 2

  1. Артем:

    Ну и смысл этого решения?
    С таким подходом смысла использовать js абсолютно нет, так как, Вы с помощью js все равно используете css3 который не поддерживается браузерами IE8 <, если и идти таким путем, то ну нужно париться и создавать какие-то js файлы, проще уж сразу в таблице стилей задать.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.