How do I give separate color to rows depending on cell value

Question

0.00/5 (No votes)

See more:

, +

I am using datatables.net. 

Rows in tables are arranged with EmployeeGroupNumber. 

I would like to have even EmployeeGroupNumber rows with one color and odd with another. so that it could be clean to separate the details in the table

What I have tried:

currently I am using bootstrap

table-striped

class which makes alternate rows with separate color which I do not want.

Posted 16-Mar-18 4:40am

istudent

Updated 17-Mar-18 3:56am

Add a Solution

Comments

F-ES Sitecore 16-Mar-18 10:52am

Change the table-striped class to use the styles you want, or create a new class with the styles you want and use that class instead.

A_Griffin 16-Mar-18 13:48pm

What's the difference between "alternate rows with separate color" and having even numbered rows with one color and odd numbered rows with another?

istudent 16-Mar-18 15:01pm

my rows will be sorted by column 'Group number'. so I want rows with group Number '1' red. and group Number '2' green.

GroupNumber
------------
1
1
2
2
2
3
3
3

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ehsan Sajjad · Accepted Answer · 2018-03-17T03:57:00

You will need to provide the implementation for createdRow event that would be called for each row and there you can change style of the row on some business logic like following:

JavaScript

"createdRow": function (row, data, index) {
                            if (data["Building"] == null)
                                return;
                            switch (data["Building"].toLowerCase()) {
                                case 'west':
                                    $('td:not(:last-child)', row).css({
                                        'background': 'red',
                                        'color': 'white'
                                    });
                                    break;
                            }
                        }

What i was doing here is set the row background-color to read and text-color for all the row cells white.

Hope it helps.