---
description: https://codepen.io/RedJokingInn/pen/jKzPpQ
---

# \[DATATABLE] CodePen Home dataTables conditional row and cell styling (ok)

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1E4Gk2ppVKb4olmnun%2Fuploads%2Fi2dZa7gWT7ch430h5y8t%2Fimage.png?alt=media\&token=12c72c13-9292-40e4-aa3f-8004d9cdb046)

C:\xampp\htdocs\wpclidemo\index.php

```php
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">
  <meta name="apple-mobile-web-app-title" content="CodePen">
  <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
  <link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111">
  <title>CodePen - dataTables conditional row and cell styling</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.bootstrap.min.css">
  <style>
    body {
      margin: 2em;
    }
    .lightRed {
      background-color: #ff8080 !important
    }
    .lightRed a {
      color: #fff;
      font-weight: bold;
    }
    .red {
      background-color: #f00;
    }
  </style>
  <script>
    window.console = window.console || function(t) {};
  </script>
  <script>
    if (document.location.search.match(/type=embed/gi)) {
      window.parent.postMessage("resize", "*");
    }
  </script>
</head>
<body translate="no">
  <a class="btn btn-success" style="margin-bottom:20px;" href="https://codepen.io/collection/XKgNLN/" target="_blank">Other examples on Codepen</a>
  <div id="example_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
    <div class="row">
      <div class="col-sm-12">
        <table id="example" class="table table-striped table-bordered dataTable no-footer" cellspacing="0" width="100%" role="grid" aria-describedby="example_info" style="width: 100%;">
          <thead>
            <tr role="row">
              <th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Order: activate to sort column descending" style="width: 95px;">Order</th>
              <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Description: activate to sort column ascending" style="width: 245px;">Description</th>
              <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Deadline: activate to sort column ascending" style="width: 130px;">Deadline</th>
              <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Status: activate to sort column ascending" style="width: 103px;">Status</th>
              <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Amount: activate to sort column ascending" style="width: 120px;">Amount</th>
            </tr>
          </thead>
          <tbody>
            <tr class="lightRed odd" role="row">
              <td class="sorting_1">1</td>
              <td>Alphabet puzzle</td>
              <td>2016/01/15</td>
              <td class="red"><a href="#">Done</a></td>
              <td data-order="1000">€1.000,00</td>
            </tr>
            <tr role="row" class="even">
              <td class="sorting_1">2</td>
              <td>Layout for poster</td>
              <td>2016/01/31</td>
              <td>Planned</td>
              <td data-order="1834">€1.834,00</td>
            </tr>
            <tr role="row" class="odd">
              <td class="sorting_1">3</td>
              <td>Image creation</td>
              <td>2016/01/23</td>
              <td>To Do</td>
              <td data-order="1500">€1.500,00</td>
            </tr>
            <tr class="lightRed even" role="row">
              <td class="sorting_1">4</td>
              <td>Create font</td>
              <td>2016/02/26</td>
              <td class="red">Done</td>
              <td data-order="1200">€1.200,00</td>
            </tr>
            <tr role="row" class="odd">
              <td class="sorting_1">5</td>
              <td>Sticker production</td>
              <td>2016/02/18</td>
              <td>Planned</td>
              <td data-order="2100">€2.100,00</td>
            </tr>
            <tr role="row" class="even">
              <td class="sorting_1">6</td>
              <td>Glossy poster</td>
              <td>2016/03/17</td>
              <td>To Do</td>
              <td data-order="899">€899,00</td>
            </tr>
            <tr role="row" class="odd">
              <td class="sorting_1">7</td>
              <td>Beer label</td>
              <td>2016/05/28</td>
              <td>Confirmed</td>
              <td data-order="2499">€2.499,00</td>
            </tr>
            <tr role="row" class="even">
              <td class="sorting_1">8</td>
              <td>Shop sign</td>
              <td>2016/04/19</td>
              <td>Offer</td>
              <td data-order="1099">€1.099,00</td>
            </tr>
            <tr role="row" class="odd">
              <td class="sorting_1">9</td>
              <td>X-Mas decoration</td>
              <td>2016/10/31</td>
              <td>Confirmed</td>
              <td data-order="1750">€1.750,00</td>
            </tr>
            <tr role="row" class="even">
              <td class="sorting_1">10</td>
              <td>Halloween invite</td>
              <td>2016/09/12</td>
              <td>Planned</td>
              <td data-order="400">€400,00</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.colVis.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
  <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
  <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
  <script id="rendered-js">
    $(document).ready(function() {
      // DataTable initialisation
      $('#example').DataTable({
        "paging": true,
        "autoWidth": true,
        "columnDefs": [{
          "targets": 3,
          "render": function(data, type, full, meta) {
            var cellText = $(data).text(); //Stripping html tags !!!
            if (type === 'display' && (cellText == "Done" || data == 'Done')) {
              var rowIndex = meta.row + 1;
              var colIndex = meta.col + 1;
              $('#example tbody tr:nth-child(' + rowIndex + ')').addClass('lightRed');
              $('#example tbody tr:nth-child(' + rowIndex + ') td:nth-child(' + colIndex + ')').addClass('red');
              return data;
            } else {
              return data;
            }
          }
        }]
      });
    });
    //# sourceURL=pen.js
  </script>
</body>
</html>

```
