title: Assigning Boolean Values to html Table Entries
body: <p>My goal is to attach a hidden value of either 0 or 1 to each entry in a table. If the value is a 0 the entry will be colored Red, and if the value is a 1, the entry will be colored green.</p>
  
  <p>I tried implementing this using filters and creating two different classes 'success' and 'danger' if the class 'success was added to the entry then the entry would be colored green and for 'danger' it would be colored red. I was able to get this to work by using a filter that checks for the string "True" or "False" in the entry. If the String is "True" then it adds the success class if if it is false it adds the danger class. This works however I now want to expand this idea so that every entry will have an assigned boolean.</p>
  
  <p>I am looking for some help on how to do this.</p>
  
  <p>This is my current code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
    &lt;meta name="robots" content="noindex, nofollow"&gt;
    &lt;meta name="googlebot" content="noindex, nofollow"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
  
    &lt;script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"&gt;&lt;/script&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="/css/result-light.css"&gt;
  
    &lt;style type="text/css"&gt;
      .success { background:green; }
  .danger { background:red; }
    &lt;/style&gt;
    &lt;!-- TODO: Missing CoffeeScript 2 --&gt;
  
    &lt;script type="text/javascript"&gt;
  
  
      $(function(){
  
  $('tr:has(td:contains("True"))').addClass('success');
  $('tr:has(td:contains("False"))').addClass('danger');
  
      });
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
    &lt;table width="100%"&gt;
      &lt;tr&gt;&lt;td&gt;True&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;True&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;False&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;True&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;False&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;True&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;True&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  
    &lt;script&gt;
      // tell the embed parent frame the height of the content
      if (window.parent &amp;&amp; window.parent.parent){
        window.parent.parent.postMessage(["resultsFrame", {
          height: document.body.getBoundingClientRect().height,
          slug: "rm3Hz"
        }], "*")
      }
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>