ansaurus

Question

How to style alternating rows in asp.net mvc

Answer 1

+7 A:

I found this snippet of JQuery code, which I find to be much cleaner.

$(document).ready(function() { $("table tr:nth-child(odd)").addClass("colorfull"); });

I have taken out the counter logic. This JQuery script manipulates the DOM to set the css class of every other row in the foreach loop.

YeahStu 2009-10-19 02:44:23

I recommend this, no tag soup for you!

jfar 2009-10-19 03:11:29

http://roshanbh.com.np/2008/03/different-color-alternate-row-jquery.html

Junior Mayhé 2010-04-10 16:54:20

Answer 2

+1 A:

If you want it cleaner I'd recommend writing a custom HtmlHelper extension. I would not use jquery as stu42 suggests simply because I like to look to javascript purely for behavior. Ideally, and hopefully in the not too distant future, you would use pure css for this purpose. Until then, I'd leave it in the markup, as you're currently doing, but with an extension that handles the logic, pulling it out of the aspx.

dustyburwell 2009-10-19 02:58:42

Can you provide an example of what this might look like?

YeahStu 2009-10-19 13:56:29

Answer 3

+2 A:

If you are the daring types who wants to dive into CSS3

tr:nth-child(odd)      { background-color:#eee; }
tr:nth-child(even)      { background-color:#fff; }

Perpetualcoder 2009-10-19 03:09:53

Works in fire fox, chrome, but not in IE :(

Sly 2009-10-19 07:16:54

not even in IE 8 ? O havent tested on IE 8 myself but I imagined it would... service pack !!

Perpetualcoder 2009-10-19 15:59:25

Don't work in IE 8 on Win7 x64

Sly 2009-10-21 10:46:24

cuz thats high tech stuff :P

Perpetualcoder 2009-10-21 15:43:06

Answer 4

A:

If you don't want to use a class you can set css directly with jquery.

Suppose your table tag is: <table id="tb">..., you just have to set your html as follows:

<head>
<script language="javascript" type="text/javascript" src="jquery-min.js"/>
</head>

<body>
    <script language="javascript" type="text/javascript">
    $(document).ready(function() { 
        $("#tb tr:odd").css("background-color", "#F4F4F8"); 
    });
    </script>

    <table id="tb">
        <tr><th>Id</th><th>Name</th></tr>
        <tr><td>1</td><td>Junior</td></tr>
        <!--more rows here... -->
    </table>
</body>

Junior Mayhé 2010-04-10 17:10:33

ansaurus

tags:

views:

answers:

How to style alternating rows in asp.net mvc

related questions