title: javascript: check a condition for a <td> value in a table depending on its table header
body: <p>In my HTML page I have a dynamic table which receives data from database. All cells have numeric values. I need to check different condition for different columns whether the value is less than or greater than a particular value and give background color to that cell according to the result. And I don't want to give a id for each td tag . I want to fulfill this with JavaScript. Following is the code that I have implemented.</p>
  
  <pre><code>function color() {
      var val = 0; //value to be compared with
      var header = document.getElementById("test").getElementsByTagName("th");
      for (var j = 0; j &lt; header.length; j++) {
          if (header[j].innerHTML == "NB HC") { //comparing the table header
              var cells = document.getElementById("test").getElementsByTagName("td");
              for (var i = 0; i &lt; cells.length; i++) {
                  if (cells[i].innerHTML &gt; val) {
                      cells[i].style.backgroundColor = "red";
                  }
              }
          }
      }
  }
  </code></pre>
  
  <p>and after this code the result is, the comparison is happening in all columns. I want this to happen in the column with header "NB HC".</p>
  
  <p>My HTML looks like ,</p>
  
  <pre><code>&lt;body onload="color()"&gt;
  
  &lt;table  id="test"&gt;
  
      &lt;tr&gt;
          &lt;td&gt;B HC&lt;/td&gt;
          &lt;td&gt;NB HC&lt;/td&gt;
          &lt;td&gt;Support HC&lt;/td&gt;
      &lt;/tr&gt;
  
            &lt;core:forEach items="${myCondition}" var="row"&gt;
         &lt;tr&gt;
  
  
                  &lt;td width="60 px" align="center"&gt;my Value&lt;/td&gt;
  
  
                 &lt;td width="60 px" align="center"&gt;my Value 1&lt;/td&gt;
  
  
                 &lt;td width="60 px" align="center"&gt;my Value 2&lt;/td&gt;
       &lt;/tr&gt;
      &lt;/core:forEach&gt;
  &lt;/table&gt;
  
  &lt;/body&gt;
  </code></pre>