title: Highlight tables cells based on values in JSON with JQUERY
body: <p>I have a web page which displays a table of information from a JSON. Once search is done the table cells change background color to match certain values returned in the jason file. </p>
  
  <p>See sample in  <strong><a href="http://fiddle.jshell.net/4HF4B/2/" rel="nofollow">JS Fiddle</a></strong> </p>
  
  <p><strong>My JSON and Jquery attempt</strong> </p>
  
  <pre><code>  var data = [{
      "id": "1",
          "slot": "01",
          "date": "20-01-2014",
          "status": "1",
          "code": "2"
  }, {
      "id": "41",
          "slot": "05",
          "date": "20-01-2014",
          "status": "0",
          "code": "1"
  }, {
      "id": "11",
          "slot": "04",
          "date": "20-01-2014",
          "status": "0",
          "code": "4"
  }, {
      "id": "5",
          "slot": "03",
          "date": "20-01-2014",
          "status": "0",
          "code": "1"
  }, {
      "id": "23",
          "slot": "02",
          "date": "20-01-2014",
          "status": "1",
          "code": "3"
  }];
  $("button").click(function () {
      var $results = $("#results"), // Get the TR.
          $tds = $("#results").find("td"), // Get the TDs within the TR.
          noRecord = "&lt;td colspan=\"5\"&gt;No record to display!&lt;/td&gt;";
  
  
      // Check to see if data was returned.
  
      if (data === undefined) {
          // Data was not returned.
  
          if ($results.html().indexOf(noRecord) === -1) {
              // Results TR has previous values that need to be removed.
  
              for (i = 1; i &lt; 6; i++)
              $($tds[i]).remove();
  
              // Add back the [No record to display!] TD.
  
              $(noRecord).insertAfter($tds[0]);
          }
      } else {
          // Data was returned.
  
          $.each(data, function (i) {
              // Store the current data.
  
              var st = parseInt(data[i].status,10);
              var sl = parseInt(data[i].slot,10);
              var cd = parseInt(data[i].code,10);
  
              // Check to see if the Results TR has previous values or not.
  
              if ($results.html().indexOf(noRecord) &gt; -1) {
                  // Results TR does not have previous values.
  
                  var html = "";
  
                  // Generate new TDs.
  
                  for (i = 1; i &lt; 6; i++) {
                      if (st === 0 &amp;&amp; i === sl) {
                          html += "&lt;td class=\"noerror\"&gt;&lt;/td&gt;";
                      } else if (st === 1 &amp;&amp; i === sl) {
                          html += "&lt;td class=\"error\"&gt;&lt;/td&gt;";
                      }
                  }
  
                  // Remove [No record to display!] TD and replace with new TDs.
  
                  $($tds[1]).replaceWith(html);
              } else {
                  // Results TR has previous values so we need to loop 
                  // through each existing TD replacing its class
  
                  for (i = 1; i &lt; 6; i++) {
                      if (st !== 0) {
                          // Change class to "error"
  
                          $($tds[i])
                              .removeClass("noerror")
                              .addClass("error");
  
                      } else {
                          // Change class to "noerror" 
  
                          $($tds[i])
                              .removeClass("error")
                              .addClass("noerror");
  
                      }
                  }
              }
          });
      }
  });
  </code></pre>
  
  <p>The HTML table is like</p>
  
  <pre><code>&lt;table border="1"&gt;
      &lt;tr&gt;
          &lt;td&gt;Slot/statu-error&lt;/td&gt;
          &lt;td&gt;Slot1&lt;/td&gt;
          &lt;td&gt;Slot2&lt;/td&gt;
          &lt;td&gt;Slot3&lt;/td&gt;
          &lt;td&gt;Slot4&lt;/td&gt;
          &lt;td&gt;Slot5&lt;/td&gt;
          &lt;td&gt;Details&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="results"&gt;
          &lt;td&gt;First row&lt;/td&gt;
          &lt;td colspan="5"&gt;No record to display!&lt;/td&gt;
          &lt;td&gt;
              &lt;button&gt;More+&lt;/button&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;button&gt;Update&lt;/button&gt;
  &lt;p&gt; &lt;b&gt;What I actually want on update&lt;/b&gt;&lt;br /&gt;
      &lt;i&gt;The cell is green when stus is = 1, red otherwise &lt;br /&gt;
          The cell is green when code = 1, red otherwise&lt;br /&gt;
      Typically there will be more rows than shown for other parameters&lt;/i&gt;
  &lt;/p&gt;
  &lt;table border="1"&gt;
      &lt;tr&gt;
          &lt;td&gt;Slot/statu-error&lt;/td&gt;
          &lt;td&gt;Slot1&lt;/td&gt;
          &lt;td&gt;Slot2&lt;/td&gt;
          &lt;td&gt;Slot3&lt;/td&gt;
          &lt;td&gt;Slot4&lt;/td&gt;
          &lt;td&gt;Slot5&lt;/td&gt;
          &lt;td&gt;Details&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="results"&gt;
          &lt;td&gt;Status&lt;/td&gt;
          &lt;td class="noerror"&gt;&lt;/td&gt;
          &lt;td class="error"&gt;&lt;/td&gt;
          &lt;td class="error"&gt;&lt;/td&gt;
          &lt;td class="error"&gt;&lt;/td&gt;
          &lt;td class="noerror"&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;button&gt;More+&lt;/button&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Code&lt;/td&gt;
          &lt;td class="error"&gt;&lt;/td&gt;
          &lt;td class="noerror"&gt;&lt;/td&gt;
          &lt;td class="error"&gt;&lt;/td&gt;
          &lt;td class="noerror"&gt;&lt;/td&gt;
          &lt;td class="error"&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;button&gt;More+&lt;/button&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;button&gt;Update&lt;/button&gt;
  </code></pre>