javascript - td background colouring applied to complete column rather to a single cell -

i've below html.

 <table border="1" class="mytable">                <tr>                   <th class="cname">component</th>                   <th class="pname">properties</th>                      <th class="sname">lqwasb02</th>                </tr>                      <tr>                      <td class="cname">emwbisconfig</td>                      <td class="pname">reevaluationtimer</td>                         <td class="pvalue">every 1 hour without catch up</td>                      </tr>                                           <tr>                      <td class="cname">calculatecategorymediainfoservice</td>                      <td class="pname">scheduled</td>                         <td class="pvalue">yes</td>                      </tr>                      <tr>                      <td class="cname">emwbisscheduler</td>                      <td class="pname">scheduled</td>                         <td class="pvalue">no</td>                      </tr>                      <tr>                      <td class="cname">catalogtools</td>                      <td class="pname">loggingdebug</td>                         <td class="pvalue">false</td>                      </tr>              </table> 

below jquery i've written.

$(document).ready(function(){            var list = ['every 1 hour without catch up','yes','yes','false'];            $.each(list,function(index,value){               //alert(index+' : '+value);            });             var idx;var list2 = new array();             // find index of cell 'lqwasb02'            $('.mytable th').each(function(index) {              if ($(this).text() === 'lqwasb02') idx = index;            });            // loop through each cell same index             $('.mytable tr').each(function() {                if($(this).find('td:eq('+idx+')').text() !=""){                   list2.push($(this).find('td:eq('+idx+')').text());                }            }); var idx2 = [];               for(var x=0;x<list2.length;x++){                   if(list[x]===list2[x]){                       //console.log(list[x]);                   }else{                       console.log('mismatched : '+list[x]);                       $('.mytable tr').each(function() {                         $(this).find('td:eq('+x+')').css("background-color", "red");                       });                       idx2.push(x);                   }               } }); 

i'm trying compare values in list values in lqwasb02 column , if finds difference, should highlight background of td cell in red colour.

current issue jquery code, highlighting complete column.

can please me i'm getting wrong? if possible, please pass on recommended solutions.

many in advance.

the problem in .find returning multiple elements it's selector matches. opposed storing text value td elements in second array, store actual td element, compare it's text, , can assign background color directly element opposed finding again via it's index:

$(document).ready(function(){      var list = ['every 1 hour without catch up','yes','yes','false'];      $.each(list,function(index,value){         //alert(index+' : '+value);      });      var idx;var list2 = new array();      // find index of cell 'lqwasb02'      $('.mytable th').each(function(index) {          if ($(this).text() === 'lqwasb02') idx = index;      });      // loop through each cell same index      $('.mytable tr').each(function() {          if($(this).find('td:eq('+idx+')').text() !=""){              list2.push($(this).find('td:eq('+idx+')')); // <-- store object here, not it's text value.          }      });           var idx2 = [];      for(var x=0; x < list2.length; x++){          if(list[x]===list2[x].text()) { // <-- compare list[x] text value of list2[x]              //console.log(list[x]);          } else {              list2[x].css("background-color", "red"); // <-- no find or selector needed, apply object stored earlier.          };      idx2.push(x);      }  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <table border="1" class="mytable">      <tr>          <th class="cname">component</th>          <th class="pname">properties</th>          <th class="sname">lqwasb02</th>      </tr>      <tr>          <td class="cname">emwbisconfig</td>          <td class="pname">reevaluationtimer</td>          <td class="pvalue">every 1 hour without catch up</td>      </tr>                           <tr>          <td class="cname">calculatecategorymediainfoservice</td>          <td class="pname">scheduled</td>          <td class="pvalue">yes</td>      </tr>      <tr>          <td class="cname">emwbisscheduler</td>          <td class="pname">scheduled</td>          <td class="pvalue">no</td>      </tr>      <tr>          <td class="cname">catalogtools</td>          <td class="pname">loggingdebug</td>          <td class="pvalue">false</td>      </tr>  </table>