locked
to change the background color of the datatables table row RRS feed

  • Question

  • User-1355965324 posted

    I am using the datatable . How do I can change the back ground color of the row of the table . At the moment the back ground color is  whit gray color. I dont know how to change the back ground color, Please help

    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    
    
    <table id="empview" class="display nowrap" cellspacing="0">
                                <thead class="thead-light">
                                    <tr>
                                        <th rowspan="2">Employee</th>
                                        <th colspan="4">Monday</th>
                                        <th colspan="4">Tuesday</th>
                                        <th colspan="4">Wednesday</th>
    
                                    </tr>
    
                                    <tr>
                                        <th>In Time</th>   @*Monday*@
                                        <th>Out Time</th>  @*Monday*@
                                        <th>Break Hrs</th>  @*Monday*@
                                        <th>Net Hrs</th>  @*Monday*@
    
                                        <td>In Time</td>   @*Monday*@
                                        <td>Out Time</td>  @*Monday*@
                                        <td>Break Hrs</td>  @*Monday*@
                                        <td>Net Hrs</td>  @*Monday*@
    
                                        <td>In Time</td>   @*Monday*@
                                        <td>Out Time</td>  @*Monday*@
                                        <td>Break Hrs</td>  @*Monday*@
                                        <td>Net Hrs</td>  @*Monday*@
                                    </tr>
                                </thead>
    
                                <tbody>
    
    
                                    @foreach (EmployeeWorkTimeSettingsModel EmpSetting in @ViewBag.EmpviewReport)
                                    {
                                        <tr>
                                            <td style="max-width:500px;overflow:hidden; white-space:nowrap">@EmpSetting.EmployeeName </td>
    
                                            <td>@EmpSetting.MondayInTime </td>
                                            <td>@EmpSetting.MondayOutTime </td>
                                            <td>@EmpSetting.MondayBreakHrs </td>
                                            <td>@EmpSetting.MondayNetHrs </td>
    
                                            <td>@EmpSetting.TuesdayInTime </td>
                                            <td>@EmpSetting.TuesdayOutTime </td>
                                            <td>@EmpSetting.TuesdayBreakHrs </td>
                                            <td>@EmpSetting.TuesdayNetHrs </td>
    
                                            <td>@EmpSetting.WednesdayInTime </td>
                                            <td>@EmpSetting.WednesdayOutTime </td>
                                            <td>@EmpSetting.WednesdayBreakHrs </td>
                                            <td>@EmpSetting.WednesdayNetHrs </td>
    
                                        </tr>
    
                                    }
    
    
    
                                </tbody>
    
    
                            </table>

    Wednesday, January 23, 2019 11:12 AM

Answers

  • User1520731567 posted

    Hi polachan,

    According to your descriptions,I suggest you could use fnRowCallback.

    This function allows you to 'post process' each row after it have been generated for each table draw, but before it is rendered on screen.

    For example:

       var table = $('#empview').DataTable(
                {
                    "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                            $('td', nRow).css('background-color', 'Red');
                    }
                }
            );

    How my demo works:

    More details,you could refer to:

    http://abregman.com/2017/05/29/ajax-datatable-changing-cell-color-based-on-the-data/

    Best Regards.

    Yuki Tao

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 24, 2019 8:55 AM

All replies

  • User1120430333 posted

    https://www.w3schools.com/tags/att_td_bgcolor.asp

    You can also use CSS and set the background color for all <TD>'s 

    Your post is not a Core issue. It's a simple HTML and CSS issue that should be addressed at the below forum.

    https://forums.asp.net/130.aspx/1?HTML+CSS+and+JavaScript

    Wednesday, January 23, 2019 11:32 AM
  • User-2054057000 posted

    Rows are represented by 'tr' element. You can change their color by adding the below css in your style sheet file:

    table tr{
      background-color: Red;
    }
    Wednesday, January 23, 2019 3:11 PM
  • User-1355965324 posted

    I had tried table <tr> color but not working with var table = $('#empview').DataTable(); After giving the  tr background color only changes its header color. The content row still gray white

    Wednesday, January 23, 2019 8:11 PM
  • User1520731567 posted

    Hi polachan,

    According to your descriptions,I suggest you could use fnRowCallback.

    This function allows you to 'post process' each row after it have been generated for each table draw, but before it is rendered on screen.

    For example:

       var table = $('#empview').DataTable(
                {
                    "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                            $('td', nRow).css('background-color', 'Red');
                    }
                }
            );

    How my demo works:

    More details,you could refer to:

    http://abregman.com/2017/05/29/ajax-datatable-changing-cell-color-based-on-the-data/

    Best Regards.

    Yuki Tao

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 24, 2019 8:55 AM