asked on

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

Chris Stanyon

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.

ASKER CERTIFIED SOLUTION

Zakaria Acharki

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Julian Hansen

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?

lenamtl

Hi,

You can use Datatables this is already include into the script plus it have a lot of great features ...
https://datatables.net/

Michael Sterling

ASKER

Thanks to all who helped/contributed.