What's the best way to do "zebra striping" of tables?
Aaron Cohen
The top-of-my head ideas are that in your template.html, you'd have a
table like so:
<table class="striped">
<tr class="even"><td>Sample even row</td></tr>
<tr class="odd"><td>Sample odd row</td></tr>
</table>
So that your designer and do the styling in CSS. (The point of this in
the end is to have one of those tables with alternating colors that
are the style nowadays).
It's up to the enlive clojure code to make sure the right even/odd
class end up on the correct rows.
Is that the best way to do it though?
Using javascript, such as through jquery, you'd often simply your
table with its "striped" class, and then have a little javascript that
comes along after the fact to apply the correct class to the rows. I'm
sure there are other ways to do it as well.
Any feelings about which is the best one?
David Nolen
The subject kind of says it all, but in case it's not clear enough.
The top-of-my head ideas are that in your template.html, you'd have a
table like so:
<table class="striped">
<tr class="even"><td>Sample even row</td></tr>
<tr class="odd"><td>Sample odd row</td></tr>
</table>
It's up to the enlive clojure code to make sure the right even/odd
class end up on the correct rows.
Is that the best way to do it though?
Using javascript, such as through jquery, you'd often simply your
table with its "striped" class, and then have a little javascript that
comes along after the fact to apply the correct class to the rows. I'm
sure there are other ways to do it as well.
Any feelings about which is the best one?
Christophe Grand
On Wed, Feb 3, 2010 at 9:06 PM, David Nolen <dnolen...@gmail.com> wrote:
> On Wed, Feb 3, 2010 at 11:05 AM, Aaron Cohen <reml...@gmail.com> wrote:
>>
>> The subject kind of says it all, but in case it's not clear enough.
>>
>> The top-of-my head ideas are that in your template.html, you'd have a
>> table like so:
>>
>> <table class="striped">
>> <tr class="even"><td>Sample even row</td></tr>
>> <tr class="odd"><td>Sample odd row</td></tr>
>> </table>
>
> The only browser that doesn't support doing this with CSS3 nth-child is
> Internet Explorer.
I concur: if you can use nth-child
Anyway here is how to do it with Enlive:
(use 'net.cgrand.enlive-html)
(def src (-> "<table><tr><td>value comes here" java.io.StringReader.
html-resource))
(deftemplate zebra src [xs]
[:tr] (clone-for [x xs]
[:td] (content x))
[[:tr odd]] (add-class "odd")
[[:tr even]] (add-class "even"))
user=> (apply str (zebra ["one" "two" "three" "four" "five"]))
"<html><body><table><tr class=\"odd\"><td>one</td></tr><tr
class=\"even\"><td>two</td></tr><tr
class=\"odd\"><td>three</td></tr><tr
class=\"even\"><td>four</td></tr><tr
class=\"odd\"><td>five</td></tr></table></body></html>"
>> Any feelings about which is the best one?
>
> Putting it in JavaScript is using up client browser cycles best used
> elsewhere I think.
Unless you use CSS3 and put the javascript in a conditional comment to
provide a fallback for IE.
Christophe
--
Professional: http://cgrand.net/ (fr)
On Clojure: http://clj-me.cgrand.net/ (en)