How do I alternately color my table rows?

Michael Sterling
Michael Sterling used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
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.
Analyst Developer
Distinguished Expert 2018
Commented:
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
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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?
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 Developer

Author

Commented:
Thanks to all who helped/contributed.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial