How do I alternately color my table rows?

I'm trying to alternate the row colors for my table in my razor view but nothing seems to be working. I'll give examples of all that I've tried below:

tried using the row counter...
            <table class="contain myTable">
                <tr>
                    <td class="tableHead" colspan="4">Service Groups</td>
                </tr>
                <tr>
                    <td>
                        <table class="contain">
                            <tr class="hdrBorder">
                                <td>@Html.Label(SGMResources.GridGroupName, new { @class = "colHeader" })</td>
                                <td>@Html.Label(SGMResources.GridGroupCategory, new { @class = "colHeader" })</td>
                                <td>@Html.Label(SGMResources.GridGroupTypeName, new { @class = "colHeader" })</td>
                                <td>@Html.Label(SGMResources.GridGroupIsActive, new { @class = "colHeader" })</td>
                            </tr>
                            @foreach (var d in Model.GetAllGroups())
                            {
                                <tr class="@(Model.GetAllGroups().IndexOf(d) % 2 == 0 ? "" : "altRow" )">
                                    <td class="myGroupStyle"><input name="linkSelectedGroupID_@d.GroupID" type="submit" class="fakeLink" value="@d.Name" /></td>
                                    <td class="myGroupStyle">@d.Description</td>
                                    <td class="myGroupStyle">@d.GroupTypeName</td>
                                    <td class="myGroupStyle">@d.IsActive</td>
                                </tr>
                            }
                        </table>
                    </td>
                </tr>
            </table>

Open in new window


jQuery
    <div class="subBlockWrapper">
        <div class="subBlock">
            <table class="contain myTable">
                <tr>
                    <td class="tableHead" colspan="4">Service Groups</td>
                </tr>
                <tr>
                    <td>
                        <table class="contain">
                            <tr class="hdrBorder">
                                <td>@Html.Label(SGMResources.GridGroupName, new { @class = "colHeader" })</td>
                                <td>@Html.Label(SGMResources.GridGroupCategory, new { @class = "colHeader" })</td>
                                <td>@Html.Label(SGMResources.GridGroupTypeName, new { @class = "colHeader" })</td>
                                <td>@Html.Label(SGMResources.GridGroupIsActive, new { @class = "colHeader" })</td>
                            </tr>
                            @foreach (var d in Model.GetAllGroups())
                            {
                                <tr>
                                    <td class="myGroupStyle"><input name="linkSelectedGroupID_@d.GroupID" type="submit" class="fakeLink" value="@d.Name" /></td>
                                    <td class="myGroupStyle">@d.Description</td>
                                    <td class="myGroupStyle">@d.GroupTypeName</td>
                                    <td class="myGroupStyle">@d.IsActive</td>
                                </tr>
                            }
                        </table>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $("table tr:odd").css({
                "background-color": "#000",
            });
            $("table tr:even").css({
                "background-color": "#bbbcbe",
            });
        });
    </script>

Open in new window


css
<table class="contain myTable">
.
.
.

</table>

AND THEN IN MY .css FILE... 

.myTable tr:nth-child(odd) {
    background-color: #bbbcbe !important;
}

.myTable tr:nth-child(even) {
    background-color: #000 !important;
}

Open in new window

LVL 1
Michael SterlingWeb Applications DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
From your code, it looks like you're adding a class of altRow for alternative rows, so you should be able to use that to style them:

//CSS
tr { background-color: red; }
tr.altRow { background-color: green; }

Once you've generate your page, do a view source to make sure that the altRowclass is actually being applied correctly.
Zakaria AcharkiAnalyst DeveloperCommented:
Your code seems fine must work with just one of the options CSS/JS :

CSS working fiddle sample
JS working fiddle sample


Else try to create a fiddle in the online editor below :

https://dotnetfiddle.net/CsMvc

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
HTML
<table class="contain">

Open in new window


CSS
.myTable tr:nth-child(odd) {
    background-color: #bbbcbe !important;
}

Open in new window


But later you say your table is
<table class="contain myTable">

Open in new window

I am not seeing this in your original source.
Are you sure the myTable class is attached to your table?
lenamtlCommented:
Hi,

You can use Datatables this is already include into the script plus it have a lot of great features ...
https://datatables.net/
Michael SterlingWeb Applications DeveloperAuthor Commented:
Thanks to all who helped/contributed.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.