Сегодня очень интересный урок, который научит Вас делать красивый эффект по развертыванию рядов таблицы.
Данная функция поможет Вам более компактно группировать данные в таблице, а также экономить место на странице. С помощью такого плагина в таблице может находиться больше полезной информации: картинки, ссылки, диаграмы и другие элементы.
Как это работает?
Для правильной работы для каждой записи нам необходимо зарезервировать два ряда. Первый ряд будет главным, а второй будет отображать детали. Ряд с деталями сворачивается\разворачивается при нажатии на главный ряд.
Реализация
Как обычно в самом начале выполняем все необходимые подключения скриптов: фреймворк и вспомогательный скрипт, который делает эффектны возможными.
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
$("#report tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
//$("#report").jExpand();
});
</script>
Теперь создаем таблицу. как говорилось выше должен быть один главный ряд, и один вспомогательный. В примере ниже рассмотрен пример со страной США. Есть главный ряд, и вспомогательный, в котором находятся изображения и ссылки на другие ресурсы. Очень важный момент: вспомогательный ряд имеет параметр colspan="5". Это важно.
<table id="report">
<tr>
<th>Country</th>
<th>Population</th>
<th>Area</th>
<th>Official languages</th>
<th></th>
</tr>
<tr>
<td>United States of America</td>
<td>306,939,000</td>
<td>9,826,630 km2</td>
<td>English</td>
<td><div class="arrow"></div></td>
</tr>
<tr>
<td colspan="5">
<img src="125px-Flag_of_the_United_States.svg.png" alt="Flag of USA" />
<h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Usa">USA on Wikipedia</a></li>
<li><a href="http://nationalatlas.gov/">National Atlas of the United States</a></li>
<li><a href="http://www.nationalcenter.org/HistoricalDocuments.html">Historical Documents</a></li>
</ul>
</td>
</tr>
...
...
...
</table>
Для правильной работы нам также понадобятся следующие стили:
<style type="text/css">
body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.8em;}
#report { border-collapse:collapse;}
#report h4 { margin:0px; padding:0px;}
#report img { float:right;}
#report ul { margin:10px 0 10px 40px; padding:0px;}
#report th { background:#7CB8E2 url(header_bkg.png) repeat-x scroll center left; color:#fff; padding:7px 15px; text-align:left;}
#report td { background:#C7DDEE none repeat-x scroll center left; color:#000; padding:7px 15px; }
#report tr.odd td { background:#fff url(row_bkg.png) repeat-x scroll center left; cursor:pointer; }
#report div.arrow { background:transparent url(arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
#report div.up { background-position:0px 0px;}
</style>
Их можно как подключить к странице, так и вынести в отдельный файл.
По моему, вышла очень интересная таблица.
Пользуйтесь! Всего наилучшего!