title: Using jQuery to highlight datatable row not working
body: <p>I have a feeling that this is going to be rather simple to answer and that I am missing something rather minor. </p>
  
  <p>So here it goes. </p>
  
  <p>What I have is a table that is being populated based off some mySQL. The datatable code looks like this: </p>
  
  <pre><code>$("#etlTable").DataTable({
      "dom": '&lt;"top"iflp&lt;"clear"&gt;&gt;rt&lt;"bottom"iflp&lt;"clear"&gt;&gt;',
      "iDisplayLength": 100,
      "ordering": false,
      "autowidth": true,
      "columns": [{ "data": "file_name","class": "nowrap" }, 
                  { "data": "start_time", "class": "nowrap" },
                  { "data": "end_time"},
                  { "data": "duration"},
                  { "data": "outcome", "class": "chk"}, 
                  { "data": "client_name" },
                  { "data": "details" }
                 ],
      "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
          if (aData[4] == "Fail") {
              $(nRow).children().each(function (index, td) {
                  $(this).addClass('res');
              });
          }
      }
  });
  </code></pre>
  
  <p>I think that this might be it seems to be the if statement that is causing the issue. But I am not sure what to do next. </p>
  
  <p>Ideally I would like to highlight the table row when the 'Outcome' column value = "Fail" </p>
  
  <p>I can get it to work without the If Statement in there, but that just hightlights the whole table which is not very helpful to me.</p>
  
  <p>Example of Table row  </p>
  
  <pre><code>&lt;tr role="row" class="odd"&gt;
      &lt;td class=" nowrap"&gt;Customer1_File&lt;/td&gt;
      &lt;td class=" nowrap"&gt;2014-10-22&lt;/td&gt;
      &lt;td&gt;2014-10-22&lt;/td&gt;
      &lt;td&gt;00:25:26&lt;/td&gt;
      &lt;td&gt;Fail&lt;/td&gt;
      &lt;td&gt;Client_name&lt;/td&gt;
      &lt;td&gt;Job_Code_Details&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>This is what I was using before, but it doesn't work since the table is loaded after this is ran: </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      var i = 0;
      var x = document.getElementsByClassName("chk");
  
      while (i &lt;= x.length) {
          document.getElementsByClassName("chk")[i].className = "res";
          x = document.getElementsByClassName("chk");
      }; 
  
  &lt;/script&gt;
  </code></pre>
  
  <p>If I do it this way: </p>
  
  <pre><code>"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
       $(nRow).children().each(function (index, td) {
           $(this).addClass('res');
       });
  }
  </code></pre>
  
  <p>It highlights my whole table. </p>
  
  <p>I am pretty new to JQuery/Javascript ( as in this is my first project, I took it over from someone else and trytingo to piece this thing together and make some improvements. ) </p>
  
  <p>So my question is, what I am I doing wrong here? How Can I highlight the row of a table based of the cell value? </p>