In the example I am showing data from the following table:

Data from table
Figure 1

The following is the script of my Employee table:

  1. CREATE TABLE [dbo].[Employee](
  2. [ID] [int] IDENTITY(1,1) NOT NULL,
  3. [Name] [varchar](50) NULL,
  4. [Email] [varchar](500) NULL,
  5. [Country] [varchar](50) NULL,
  6. [ProjectID] [int] NULL,
  7. [ManagerName] [varchar](50) NULL,
  8. CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED
  9. (
  10. [ID] ASC
  11. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF,
  12. IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON,
  13. ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
  14. ) ON [PRIMARY]
  16. GO
The following is the data in my Employee table:

Data from table
Figure 2.

I am making a join with the Project table when showing records from this table.

The following is the Project table:

Project Table
Figure 3

The following is the script of my Project table:
  1. CREATE TABLE [dbo].[Project](
  2. [ProjectID] [int] IDENTITY(1,1) NOT NULL,
  3. [ProjectName] [varchar](50) NULL,
  4. [ProjectLeader] [varchar](50) NULL,
  5. CONSTRAINT [PK_Project] PRIMARY KEY CLUSTERED
  6. (
  7. [ProjectID] ASC
  8. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF,
  9. IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON,
  10. ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
  11. ) ON [PRIMARY]
  13. GO
The following is the data in my Project table:

Data in my Project Table
Figure 4

The following is the aspx code:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default3.aspx.cs" Inherits="Contains_In_jQuery.Default3" %>
  3. <!DOCTYPE html>
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head runat="server">
  7. <title>jQuery: Change Row Back Color</title>
  8. <script src="Scripts/jquery-2.1.4.min.js"></script>
  10. <style type="text/css">
  11. body {
  12. font-family: Arial;
  13. font-size: 10pt;
  14. }
  16. td {
  17. cursor: pointer;
  18. }
  20. .hover_row {
  21. background-color: #A1DCF2;
  22. }
  23. </style>
  24. <script type="text/javascript">
  25. $(document).ready(function () {
  26. $('#gvData').empty();
  27. $.ajax({
  28. type: "POST",
  29. contentType: "application/json; charset=utf-8",
  30. url: "Default3.aspx/BindEmployees",
  31. data: "{}",
  32. dataType: "json",
  33. success: function (result) {
  34. $("#gvData").append("<tr style='background-color:red; color:white; font-weight:bold;'><td style='text-align:left;'>ID</td><td style='text-align:left;'>Name</td><td style='text-align:left;'>Email</td><td style='text-align:left;'>Country</td><td style='text-align:left;'>Project name</td><td style='text-align:left;'>Manager Name</td></tr>");
  35. for (var i = 0; i < result.d.length; i++) {
  36. var Country = result.d[i].Country;
  37. if (Country.indexOf('India') != -1) {
  38. $("#gvData").append("<tr style='background-color:#DC143C; font-family:Verdana; font-size:10pt;color:White;'><td style='text-align:left;'>" + result.d[i].ID + "</td><td style='text-align:left;'>" + result.d[i].Name + "</td><td style='text-align:left;'>" + result.d[i].Email + "</td><td style='text-align:left;'>" + result.d[i].Country + "</td><td style='text-align:left;'>" + result.d[i].ProjectID + "</td><td style='text-align:left;'>" + result.d[i].ManagerName + "</td></tr>");
  39. }
  40. else {
  41. $("#gvData").append("<tr style='background-color:skyblue; font-family:Verdana; font-size:10pt ;'><td style='text-align:left;'>" + result.d[i].ID + "</td><td style='text-align:left;'>" + result.d[i].Name + "</td><td style='text-align:left;'>" + result.d[i].Email + "</td><td style='text-align:left;'>" + result.d[i].Country + "</td><td style='text-align:left;'>" + result.d[i].ProjectID + "</td><td style='text-align:left;'>" + result.d[i].ManagerName + "</td></tr>");
  42. }
  43. }
  44. },
  45. error: function (result) {
  46. alert("Error");
  47. }
  48. });
  50. $(function () {
  51. $("[id*=gvData] td").hover(function () {
  52. $("td", $(this).closest("tr")).addClass("hover_row");
  53. }, function () {
  54. $("td", $(this).closest("tr")).removeClass("hover_row");
  55. });
  56. });
  57. });
  58. </script>
  59. </head>
  60. <body>
  61. <form id="form1" runat="server">
  62. <table style="width: 100%; text-align: center; border: solid 5px red; background-color: orange; vertical-align: top;">
  63. <tr>
  64. <td>
  65. <div>
  66. <fieldset style="width: 99%;">
  67. <legend style="font-size: 20pt; color: white; font-family: Verdana">jQuery Set Row Back Color By Checking Column Value</legend>
  68. <table style="width: 100%;">
  70. <tr>
  71. <td style="vertical-align: top; background-color: yellowgreen; text-align: center;">
  72. <asp:GridView ID="gvData" runat="server" CellPadding="4" ShowHeaderWhenEmpty="True"
  73. BackColor="White" GridLines="Both"
  74. BorderColor="#CC9966" BorderStyle="None" Width="90%" BorderWidth="1px" HorizontalAlign="Center">
  75. <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
  76. <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
  77. <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
  78. <RowStyle BackColor="White" ForeColor="#330099" />
  79. <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
  80. <SortedAscendingCellStyle BackColor="#FEFCEB" />
  81. <SortedAscendingHeaderStyle BackColor="#AF0101" />
  82. <SortedDescendingCellStyle BackColor="#F6F0C0" />
  83. <SortedDescendingHeaderStyle BackColor="#7E0000" />
  84. </asp:GridView>
  85. </td>
  86. </tr>
  87. </table>
  88. </fieldset>
  89. </div>
  90. </td>
  91. </tr>
  92. </table>
  93. </form>
  94. </body>
  95. </html>
Now my aspx.cs code is:
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Data;
  4. using System.Data.SqlClient;
  5. using System.Linq;
  6. using System.Web;
  7. using System.Web.Services;
  8. using System.Web.UI;
  9. using System.Web.UI.WebControls;
  11. namespace Contains_In_jQuery
  12. {
  13. public partial class Default3 : System.Web.UI.Page
  14. {
  15. protected void Page_Load(object sender, EventArgs e)
  16. {
  17. if (!Page.IsPostBack)
  18. {
  19. BindGridWithDummyRow();
  20. }
  21. }
  23. public void BindGridWithDummyRow()
  24. {
  25. DataTable dt = new DataTable();
  26. dt.Columns.Add("ID");
  27. dt.Columns.Add("Name");
  28. dt.Columns.Add("Email");
  29. dt.Columns.Add("Country");
  30. dt.Columns.Add("ProjectID");
  31. dt.Columns.Add("ManagerName");
  32. gvData.DataSource = dt;
  33. gvData.DataBind();
  34. }
  36. [WebMethod]
  37. public static Employee[] BindEmployees()
  38. {
  39. string connectionString = @"Data Source=INDIA\MSSQLServer2k8; Initial Catalog= TestDB; Integrated Security=true;";
  40. DataTable dt = new DataTable();
  41. List<Employee> employeeList = new List<Employee>();
  42. using (SqlConnection con = new SqlConnection(connectionString))
  43. {
  44. using (SqlCommand command = new SqlCommand("select e.ID, e.Name,e.Email,e.Country,ProjectName,e.ManagerName from Employee as e Inner join project as p on e.ProjectID=p.ProjectID ORDER BY e.Name", con))
  45. {
  46. con.Open();
  47. SqlDataAdapter da = new SqlDataAdapter(command);
  48. da.Fill(dt);
  49. foreach (DataRow dtrow in dt.Rows)
  50. {
  51. Employee employee = new Employee();
  52. employee.ID = Convert.ToInt32(dtrow["ID"].ToString());
  53. employee.Name = dtrow["Name"].ToString();
  54. employee.Email = dtrow["Email"].ToString();
  55. employee.Country = dtrow["Country"].ToString();
  56. employee.ProjectID = dtrow["ProjectName"].ToString();
  57. employee.ManagerName = dtrow["ManagerName"].ToString();
  58. employeeList.Add(employee);
  59. }
  60. }
  61. }
  62. return employeeList.ToArray();
  63. }
  64. }
  65. }
Here when showing records I am setting the row background color where the Country value is India:

row back color
Figure 5

If you want to set Column background color then use the following changes:
  1. $(document).ready(function() {
  2. $('#gvData').empty();
  3. $.ajax({
  4. type: "POST",
  5. contentType: "application/json; charset=utf-8",
  6. url: "Default3.aspx/BindEmployees",
  7. data: "{}",
  8. dataType: "json",
  9. success: function(result) {
  10. $("#gvData").append("<tr style='background-color:red; color:white; font-weight:bold;'><td style='text-align:left;'>ID</td><td style='text-align:left;'>Name</td><td style='text-align:left;'>Email</td><td style='text-align:left;'>Country</td><td style='text-align:left;'>Project name</td><td style='text-align:left;'>Manager Name</td></tr>");
  11. for (var i = 0; i < result.d.length; i++) {
  12. var Country = result.d[i].Country;
  13. if (Country.indexOf('India') != -1) {
  14. $("#gvData").append("<tr style='background-color:#DC143C; font-family:Verdana; font-size:10pt;color:White;'><td style='text-align:left;'>" + result.d[i].ID + "</td><td style='text-align:left;'>" + result.d[i].Name + "</td><td style='text-align:left;'>" + result.d[i].Email + "</td><td style='text-align:left; background-color:green;'>" + result.d[i].Country + "</td><td style='text-align:left;'>" + result.d[i].ProjectID + "</td><td style='text-align:left;'>" + result.d[i].ManagerName + "</td></tr>");
  15. } else {
  16. $("#gvData").append("<tr style='background-color:skyblue; font-family:Verdana; font-size:10pt ;'><td style='text-align:left;'>" + result.d[i].ID + "</td><td style='text-align:left;'>" + result.d[i].Name + "</td><td style='text-align:left;'>" + result.d[i].Email + "</td><td style='text-align:left;'>" + result.d[i].Country + "</td><td style='text-align:left;'>" + result.d[i].ProjectID + "</td><td style='text-align:left;'>" + result.d[i].ManagerName + "</td></tr>");
  17. }
  18. }
  19. },
  20. error: function(result) {
  21. alert("Error");
  22. }
  23. });
set Column background color
Figure 6