title: How to highlight the Table row based on Value
body: <p>I'm working on Google webApp Crud data generated from Google sheets. The search is working all fine, but I'm trying to highlight certain rows based on the data value in Column 7.</p>
  <p>E.g If the row contains in Column 7 &quot;PROCESSING&quot; I want to highlight that row with an Orange color in order to focus on that particular data.</p>
  <p>These are my script files</p>
  <p><strong>search.html</strong></p>
  <pre><code>&lt;table class=&quot;table table-hover&quot;  &gt;
        &lt;thead&gt;
          &lt;tr &gt;
            
            &lt;th scope=&quot;col&quot;&gt;Ref&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;Vehicle&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;Color&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;Price&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;Rent&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;Lcoation&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;Status&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;Send&lt;/th&gt;
      
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody id=&quot;searchResults&quot; &gt;
      
         
        &lt;/tbody&gt;
      &lt;/table&gt;
      
      
      &lt;template id=&quot;rowTemplate&quot; &gt;
       &lt;tr &gt;
            
            &lt;td class=&quot;L1&quot;&gt;&lt;/td&gt;
            &lt;td class=&quot;L2&quot;&gt;&lt;/td&gt;
            &lt;td class=&quot;L3&quot;&gt;&lt;/td&gt;
            &lt;td class=&quot;L4&quot;&gt;&lt;/td&gt;
            &lt;td class=&quot;L5&quot;&gt;&lt;/td&gt;
            &lt;td class=&quot;L6&quot;&gt;&lt;/td&gt;
            &lt;td class=&quot;L7&quot;&gt;&lt;/td&gt;
            &lt;td class=&quot;L8&quot;&gt;&lt;/td&gt;
      
        &lt;/tr&gt;
      &lt;/template&gt;
  </code></pre>
  <p><strong>main.html</strong></p>
  <pre><code>  var searchResultsBox = document.getElementById(&quot;searchResults&quot;);
      var templateBox = document.getElementById(&quot;rowTemplate&quot;);
      var template = templateBox.content;
      
      searchResultsBox.innerHTML = &quot;&quot;;
      
      resultsArray.forEach(function(r){
      
      var tr = template.cloneNode(true);
      var l1Column = tr.querySelector(&quot;.L1&quot;);
      var l2Column = tr.querySelector(&quot;.L2&quot;);
      var l3Column = tr.querySelector(&quot;.L3&quot;);
      var l4Column = tr.querySelector(&quot;.L4&quot;);
      var l5Column = tr.querySelector(&quot;.L5&quot;);
      var l6Column = tr.querySelector(&quot;.L6&quot;);
      var l7Column = tr.querySelector(&quot;.L7&quot;);
      var l8Column = tr.querySelector(&quot;.L8&quot;);
      
      l1Column.innerHTML = r[0];
      l2Column.innerHTML = r[1];
      l3Column.innerHTML = r[2];
      l4Column.innerHTML = r[3];
      l5Column.innerHTML = r[4];
      l6Column.innerHTML = r[5];
      l7Column.innerHTML = r[6];
      l8Column.innerHTML = r[7];
      
      searchResultsBox.appendChild(tr);
      
      });
      }
  </code></pre>
  <p>Is there a way to achieve my expectation?</p>
  <h2><strong>UPDATE</strong>
  This is something I'm working on but I exactly don't know how to apply to the above code.</h2>
  <pre><code>&lt;!--Script to add row colour to the table based on value--&gt;
  &lt;script type=&quot;text/javascript&quot; 
  src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js&quot;&gt;&lt;/script&gt; 
  &lt;script type=&quot;text/javascript&quot;&gt;  
  
  $(document).ready(function(){
  hightlightRows();
  });
  
  function hightlightRows(){
  $('#table tr.in_out td').each(function(){
  if ($(this).text() == 'RECEIVED') {
  $(this).parent().css('background-color','#d4edda')
  $(this).parent().css('color','#3d774b')
  }
  else if ($(this).text() == 'PROCESSING') {
  $(this).parent().css('background-color','#FCD5D5')
  $(this).parent().css('color','red')
  }
  
  else if ($(this).text() == 'SOLD') {
  
  $(this).parent().css('color','#AEB6BF')
  }
  
  }); 
  }
  
  &lt;/script&gt;
  
  &lt;!--END Script to add row colour to the table based on value--&gt;
  </code></pre>