Style odd table rows differently in ASP.Net MVC

Help me replace this cod开发者_StackOverflow中文版e, both me and Resharper don't like it:

<table width="100%">
<% for (int row = 0; row < 10; ++row) {%>
<%= "<tr" + ((row % 2 == 0) ? " class='even'" : "") + ">" %>

...

</tr>
<%}%>
</table>

Use jquery and do it on the client - your view code will be so much cleaner.

$(document).ready(function(){
  $("table tr:even").addClass("even");
});

public static class TableExtensions
{
    public static string StartRow(this HtmlHelper htmlHelper, int row)
    {
        var builder = new TagBuilder("tr");
        if (row % 2 == 0)
        {
            builder.MergeAttribute("class", "even");
        }
        return builder.ToString(TagRenderMode.StartTag);
    }
}

And:

<table width="100%">
<% for (var rowIndex = 0; rowIndex < 10; ++rowIndex) { %>
    <%= Html.StartRow(rowIndex) %>
    ....
    </tr>
<% } %>
</table>

UPDATE:

You could clean even further the tag soup:

public static class TableExtensions
{
    private class Row : IDisposable
    {
        private readonly TextWriter _writer;
        private bool _disposed;

        public Row(ViewContext viewContext)
        {
            _writer = viewContext.Writer;
        }

        public void Dispose(bool disposing)
        {
            if (!_disposed)
            {
                _disposed = true;
                _writer.Write("</tr>");
            }
        }

        public void Dispose()
        {
            this.Dispose(true);
            GC.SuppressFinalize(this);
        }
    }

    public static IDisposable BeginRow(this HtmlHelper htmlHelper, int rowIndex)
    {
        var builder = new TagBuilder("tr");
        if (rowIndex % 2 == 0)
        {
            builder.MergeAttribute("class", "even");
        }
        htmlHelper.ViewContext.Writer.Write(builder.ToString(TagRenderMode.StartTag));
        return new Row(htmlHelper.ViewContext);
    }


    public static string StartRow(this HtmlHelper htmlHelper, int row)
    {
        var builder = new TagBuilder("tr");
        if (row % 2 == 0)
        {
            builder.MergeAttribute("class", "even");
        }
        return builder.ToString(TagRenderMode.StartTag);
    }
}

And in the view:

<table width="100%">
<% for (var rowIndex = 0; rowIndex < 10; ++rowIndex) { %>
    <% using (Html.StartRow(rowIndex)) { %>
        <td>value 1</td>
        <td>value 2</td>
    <% } %>
<% } %>
</table>

Rails has a cycle method to do this.

Phil Haack created one to asp.net mvc

So you can use like this

<style>
    .first {background-color: #ddd;}
    .second {background-color: khaki;}
</style>

<table>
<% for (int i = 0; i < 5; i++) { %>
    <tr class="<%= Html.Cycle("first", "second") %>">
        <td>Stuff</td>
    </tr>
<% } %>
</table>

Use nth-child, when you have multiple tables on one screen it works better.

    $(function() {
        $('table tr:nth-child(even)').addClass("even");
    });