There is no need to manage your own variable (either an incrementing counter or a boolean); you can see if the built-in ItemIndex
property is divisible by two, and use that to set a css class:
class="<%# Container.ItemIndex % 2 == 0 ? "" : "alternate" %>"
This has the benefit of being completely based in your UI code (ascx or aspx file), and doesn't rely on JavaScript.
C#
class="<%# Container.ItemIndex % 2 == 0 ? "" : "alternate" %>"
VB
class="<%# iif(Container.ItemIndex Mod 2 = 0,"","alternate") %>"
This helped me
class='<%# Container.ItemIndex % 2 == 0 ? "" : "alternate" %>'
Previous answer resulted in "Server Tag is not well formed" error.
Apply the classes with JQuery.
$('.divtable > div:odd').addClass('dark');
$('.divtable > div:even').addClass('light');
You could use jQuery instead. This answer to a previous question may help: jQuery Zebra selector
Little tweak: the empty class could be removed with something like:
<%# Container.ItemIndex % 2 == 0 ? "<tr>" : "<tr class='odd'>" %>
No need for code. Here's a pure CSS solution:
.item:nth-child(odd){background-color: #ccc}
.item:nth-child(){background-color: #ddd}
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With