Альтернативные строки в ASP.NET

Ноябрь 1st, 2012 |

Альтернативные строки в ASP.NET

Форматирование GridView control, также как и любого другого ASP .NET control с привязкой к данным, может быть выполнено довольно простым способом, основанным на использовании двух новых функций CSS3: «tr:nth-child(odd)» и «tr:nth-child(even)». Они позволяют применять различные стили для четных и нечетных строк соответственно.

Предлагаемая методика использует исключительно функции CSS3, поэтому не требует написания серверных или клиентских сценариев. Решение довольно универсально и должно работать в любом браузере, поддерживающем HTML5 (Microsoft IE9, Mozilla FireFox 4, Google Chrome 10, Safari 5), также оно применимо к любому элементу «Table» в HTML5, как к динамически формируемому на сервере (GridView, DetailView и FormView), так и к статически добавленному в код во время разработки.

Альтернативные строки в ASP.NET

Дальнейшее усовершенствование может быть достигнуто с помощью старого доброго CSS стиля «tr:hover», добавленного к строкам таблицы. Вдобавок к этому, селекторы элементов «tr:first-child» и «tr:last-child» могут быть использованы для стилизации первой и последней строк элемента «Table».

В следующем простом примере нечетные строки таблицы отличаются от четных просто атрибутом «background-color». Любые другие функции форматирования (атрибуты шрифта, границ и т.д.) также могут быть добавлены, чтобы сделать строки более различимыми. Это относится и к CSS стилю «hover».

Пример:

/* Table odd rows style */
tr:nth-child(odd)
{
background-color<span>: #ffffff<span>;
<span>}
<span>/* Table even rows style */
tr:nth-child(even)
{
background-color<span>: #efefef<span>;
<span>}
<span>/* Table hover style */
tr:hover
{
background-color<span>: #dadada<span>;
color<span>: #000<span>;
<span>}</span></span></span></span></span></span></

Все решение, инкапсулированное в один HTML файл, приведено ниже:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ALTERNATE TABLE ROWS | HTML5, CSS3</title>

/* Table odd rows style */
div.AltRow tr:nth-child(odd) {
background-color: #ffffff;
}

/* Table even rows style */
div.AltRow tr:nth-child(even) {
background-color: #efefef;
}

/* Table hover style */
div.AltRow tr:hover {
background-color: #dadada;
}
</style>

</head>
<body>

<h2>DEMO TABLE: This Table included in div with (see CSS) implements Alternate Rows effect</h2>

<h3>Annualised Inflation Rate for the first decade of XXI Century in NY City</h3>
<h3>(re: <a href="http://exm.nr/Inf2010" target="_blank">New York City, a decade of inflation: the outspoken numbers</a>)</h3>
<div>
<table>
<tr>
<td>Product</td><td>Inflation Rate</td><td>Note</td>
</tr>
<tr>
<td>Coke® Inflation Index</td><td>7.23%</td><td>Yeah, it's now about 2 bucks for the bottle</td>
</tr>
<tr>
<td>Gas Inflation Index</td><td>6.94%</td><td>Such a pain at the pump, dude...</td>

</tr>
<tr>
<td>NY subway fare Inflation Index</td><td>4.14%</td><td><a href="http://www.youtube.com/watch?v=Q07Zp7tQBRQ" target="_blank">I want to ride my bicycle (Queens)</a></td>
</tr>
<tr>
<td>Oil (WTI) Inflation Index estimated</td><td>13.59%</td><td>Oh, man! Oh, man...</td>

</tr>
<tr>
<td>Post Stamp Inflation Index</td><td>2.92%</td><td>And, btw, email is for free...</td>
</tr>
<tr>
<td>PC RAM (memory) Inflation Index</td><td>-28.34%</td><td>Rejoyce "Intel Inside": for you it's deflation! :)</td>

</tr>
<tr>
</tr></table>
</div>
<hr />

<h2>This is a regular Table, which does not implement Alternate Rows</h2>
<h3>Precious metals annualized price index</h3>

<h3>(re: <a href="http://exm.nr/AuAgPt" target="_blank">First decade of 21st Century: Aurum is golden and Silver is such Argentum!</a>)</h3>
<table>
<tr>
<td>Precious metals</td><td>Price Index</td><td>Note</td>
</tr>
<tr>
<td>Silver</td><td>20.94%</td><td>Element Ag</td>
</tr>
<tr><td>Gold</td><td>17.86%</td><td>Element Au</td>
<tr>
<td>Platinum</td><td>10.98%</td><td>Element Pt</td>
</tr>
<tr>
<td>Palladium</td><td>-1.86% </td><td>Element Pd</td>
</tr>
</tr></table>
<hr />
Disclaimer: all data is provided 'AS IS' for Demo purpose only