Highlight texts using JavaScript or jQuery

Question

So i am pretty new to JavaScript so i would really appreciate it, if someone can help me out, Basically i am working with a html page like the one bellow

Now i am only interested in the Level column of the html code, i want my JavaScript or jQuery script to highlight any case's with level 3 in red background color,any sample code or demo would be very helpful :)

EDIT: To be clear i want the script to check all the rows and check if the level is 3 then highlight that specific case with red background color, not when checkbox is checked!, And i do have access to the sever side html files, which is why i am using javascript to do this locally to modify the page like a plugin.

 
<table id="SearchResultsTable" cellpadding="2" cellspacing="1" width="100%">
  <thead>
    <tr class="sr-header"> 
      <th class="tiny bulk-hidden" valign="top" width="3%" align="left"><input id="selectAll" class="bulk-checkbox-header bulk-hidden" onclick="selectAllCases(this.checked);" type="checkbox"> </th>
      <th class="tiny" valign="top" width="5%" align="left"><nobr><a href="" class="tiny-white">Case ID</a> </nobr> </th>
      <th class="tiny" valign="top" width="30%" align="left"><nobr><a href="" class="tiny-white">Subject</a> </nobr> </th>
      <th class="tiny" valign="top" width="20%" align="left"><nobr> </nobr> </th>
      <th class="tiny" valign="top" width="2%" align="left"><nobr><a href="" class="tiny-white">Level</a> </nobr> </th>
      <th class="tiny" valign="top" width="15%" align="left"><nobr><a href="" class="tiny-white">Status</a> </nobr> </th>
      <th class="tiny" valign="top" width="10%" align="left"><nobr> </nobr> </th>
      <th class="tiny" valign="top" width="5%" align="left"><nobr> </nobr> </th>
      <th class="tiny" valign="top" width="5%" align="right"><nobr><strong></strong> <img src="" border="0"></nobr> </th>
      <th class="tiny" valign="top" width="5%" align="right"><nobr> </nobr> </th>
    </tr>
  </thead>
  <tbody>
    <tr class="sr-light-band">
      <td class="small bulk-hidden" <nobr="" valign="top" align="left">
        <input name="selectCase" id="1696368392-checkbox" class="bulk-checkbox bulk-hidden" value="1696368392" type="checkbox">
      </td>

      <td class="small" <nobr="" valign="top" align="left"><a>1696368392</a></td>
      <td class="small" <nobr="" valign="top" align="left">
        <div title="Case1" style="position:relative; overflow:hidden; height:100%">
          <div style="position:absolute; white-space:nowrap">
            <a title="Case1">Case1</a>
          </div>
          &nbsp;
        </div>
      </td>
      <td class="small" <nobr="" valign="top" align="left">
        <div title="Jussi" style="position:relative; overflow:hidden; height:100%">
          <div style="position:absolute; white-space:nowrap">
          </div>
          &nbsp;
        </div>
      </td>
      <td class="small" <nobr="" valign="top" align="left">3</td>
      <td class="small" <nobr="" valign="top" align="left">Unassigned</td>
      <td class="small" <nobr="" valign="top" align="left"></td>
      <td class="small" <nobr="" valign="top" align="left"></td>
      <td class="small" <nobr="" valign="top" align="left"></td>
      <td class="small" <nobr="" valign="top" align="right"></td>
      <td class="small" <nobr="" valign="top" align="right"></td>
    </tr>
    <tr class="sr-dark-band">
      <td class="small bulk-hidden" <nobr="" valign="top" align="left">
        <input name="selectCase" id="1694436342-checkbox" class="bulk-checkbox bulk-hidden" value="1694436342" type="checkbox">
      </td>
      <td class="small" <nobr="" valign="top" align="left"><a>1694436342</a></td>
      <td class="small" <nobr="" valign="top" align="left">
        <div title="Case2" style="position:relative; overflow:hidden; height:100%">
          <div style="position:absolute; white-space:nowrap">
            <a title="Case2">Case2</a>
          </div>
          &nbsp;
        </div>
      </td>
      <td class="small" <nobr="" valign="top" align="left">
        <div title="" style="position:relative; overflow:hidden; height:100%">
          <div style="position:absolute; white-space:nowrap">
            <a href="" title=""></a>
          </div>
          &nbsp;
        </div>
      </td>
      <td class="small" <nobr="" valign="top" align="left">4</td>
      <td class="small" <nobr="" valign="top" align="left">Unassigned</td>
      <td class="small" <nobr="" valign="top" align="left"></td>
      <td class="small" <nobr="" valign="top" align="left"></td>
      <td class="small" <nobr="" valign="top" align="left"></td>
      <td class="small" <nobr="" valign="top" align="right"></td>
      <td class="small" <nobr="" valign="top" align="right"></td>
    </tr>
    <tr class="sr-light-band">
      <td class="small bulk-hidden" <nobr="" valign="top" align="left">
        <input name="selectCase" id="1681523912-checkbox" class="bulk-checkbox bulk-hidden" value="1681523912" type="checkbox">
      </td>
      <td class="small" <nobr="" valign="top" align="left"><a>1681523912</a></td>
      <td class="small" <nobr="" valign="top" align="left">
        <div title="Case3"position:absolute; white-space:nowrap">
          <a title="Case3">Case3</a>
        </div>
        &nbsp;
      </div>
    </td>
    <td class="small" <nobr="" valign="top" align="left">
      <div title="Jussi" style="position:relative; overflow:hidden; height:100%">
        <div style="position:absolute; white-space:nowrap">
        </div>
        &nbsp;
      </div>
    </td>
    <td class="small" <nobr="" valign="top" align="left">3</td>
    <td class="small" <nobr="" valign="top" align="left">Unassigned</td>
    <td class="small" <nobr="" valign="top" align="left"></td>
    <td class="small" <nobr="" valign="top" align="left"></td>
    <td class="small" <nobr="" valign="top" align="left"></td>
    <td class="small" <nobr="" valign="top" align="right"></td>
    <td class="small" <nobr="" valign="top" align="right"></td>
  </tr>
</tbody>
</table>

Answer 1

This is how you can do this,

1: select the header level postion. 2: search all td value for that position

var levelstatusPosition = "";

$("#SearchResultsTable th").each(function(k,v){ // find the header location of level column
  
  
  if($(v).find("a" ))
  {

     if($.trim($(this).text()) == "Level")
     {
       levelstatusPosition = k + 1; // 0 based
     }
  }
  
  });


$('#SearchResultsTable tr td:nth-child('+levelstatusPosition+')').each(function(k,v){

  if($(v).text() == 3)
  {
    $(v).parent().css("background","red")
  }
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="SearchResultsTable" cellpadding="2" cellspacing="1" width="100%">
  <thead>
    <tr class="sr-header"> 

          <th class="tiny bulk-hidden" valign="top" width="3%" align="left"><input id="selectAll" class="bulk-checkbox-header bulk-hidden" onclick="selectAllCases(this.checked);" type="checkbox"> </th>
          <th class="tiny" valign="top" width="5%" align="left"><nobr><a href="" class="tiny-white">Case ID</a> </nobr> </th>
          <th class="tiny" valign="top" width="30%" align="left"><nobr><a href="" class="tiny-white">Subject</a> </nobr> </th>
          <th class="tiny" valign="top" width="20%" align="left"><nobr> </nobr> </th>
          <th class="tiny" valign="top" width="2%" align="left"><nobr><a href="" class="tiny-white">Level</a> </nobr> </th>
          <th class="tiny" valign="top" width="15%" align="left"><nobr><a href="" class="tiny-white">Status</a> </nobr> </th>
          
          <th class="tiny" valign="top" width="10%" align="left"><nobr> </nobr> </th>
          <th class="tiny" valign="top" width="5%" align="left"><nobr> </nobr> </th>
          <th class="tiny" valign="top" width="5%" align="right"><nobr><strong></strong> <img src="" border="0"></nobr> </th>
          <th class="tiny" valign="top" width="5%" align="right"><nobr> </nobr> </th>

      </tr>
  </thead>

  <tbody>



                  <tr class="sr-light-band">


              <td class="small bulk-hidden" <nobr="" valign="top" align="left">

              





              <input name="selectCase" id="1696368392-checkbox" class="bulk-checkbox bulk-hidden" value="1696368392" type="checkbox">

              


              </td>


              <td class="small" <nobr="" valign="top" align="left"><a>1696368392</a></td>


              <td class="small" <nobr="" valign="top" align="left">


<div title="Case1" style="position:relative; overflow:hidden; height:100%">
  <div style="position:absolute; white-space:nowrap">
    <a title="Case1">Case1</a>
  </div>
  &nbsp;
</div>

</td>


              <td class="small" <nobr="" valign="top" align="left">


<div title="Jussi" style="position:relative; overflow:hidden; height:100%">
  <div style="position:absolute; white-space:nowrap">
    
  </div>
  &nbsp;
</div>

</td>


              <td class="small" <nobr="" valign="top" align="left">3</td>


              <td class="small" <nobr="" valign="top" align="left">Unassigned</td>


              <td class="small" <nobr="" valign="top" align="left"></td>


              <td class="small" <nobr="" valign="top" align="left"></td>


              <td class="small" <nobr="" valign="top" align="left"></td>


              <td class="small" <nobr="" valign="top" align="right"></td>


              <td class="small" <nobr="" valign="top" align="right"></td>


          </tr>


                  <tr class="sr-dark-band">


              <td class="small bulk-hidden" <nobr="" valign="top" align="left">

              





              <input name="selectCase" id="1694436342-checkbox" class="bulk-checkbox bulk-hidden" value="1694436342" type="checkbox">

              


              </td>


              <td class="small" <nobr="" valign="top" align="left"><a>1694436342</a></td>


              <td class="small" <nobr="" valign="top" align="left">


<div title="Case2" style="position:relative; overflow:hidden; height:100%">
  <div style="position:absolute; white-space:nowrap">
    <a title="Case2">Case2</a>
  </div>
  &nbsp;
</div>

</td>


              <td class="small" <nobr="" valign="top" align="left">


<div title="" style="position:relative; overflow:hidden; height:100%">
  <div style="position:absolute; white-space:nowrap">
    <a href="" title=""></a>
  </div>
  &nbsp;
</div>

</td>


              <td class="small" <nobr="" valign="top" align="left">4</td>


              <td class="small" <nobr="" valign="top" align="left">Unassigned</td>


              <td class="small" <nobr="" valign="top" align="left"></td>


              <td class="small" <nobr="" valign="top" align="left"></td>


              <td class="small" <nobr="" valign="top" align="left"></td>


              <td class="small" <nobr="" valign="top" align="right"></td>


              <td class="small" <nobr="" valign="top" align="right"></td>


          </tr>


                  <tr class="sr-light-band">


              <td class="small bulk-hidden" <nobr="" valign="top" align="left">

              





              <input name="selectCase" id="1681523912-checkbox" class="bulk-checkbox bulk-hidden" value="1681523912" type="checkbox">

              


              </td>


              <td class="small" <nobr="" valign="top" align="left"><a>1681523912</a></td>


              <td class="small" <nobr="" valign="top" align="left">


<div title="Case3"position:absolute; white-space:nowrap">
    <a title="Case3">Case3</a>
  </div>
  &nbsp;
</div>

</td>


              <td class="small" <nobr="" valign="top" align="left">


<div title="Jussi" style="position:relative; overflow:hidden; height:100%">
  <div style="position:absolute; white-space:nowrap">
    
  </div>
  &nbsp;
</div>

</td>


              <td class="small" <nobr="" valign="top" align="left">3</td>


              <td class="small" <nobr="" valign="top" align="left">Unassigned</td>


              <td class="small" <nobr="" valign="top" align="left"></td>


              <td class="small" <nobr="" valign="top" align="left"></td>


              <td class="small" <nobr="" valign="top" align="left"></td>


              <td class="small" <nobr="" valign="top" align="right"></td>


              <td class="small" <nobr="" valign="top" align="right"></td>


          </tr>


  </tbody>
</table>

Answer 2

$(document).ready(function() {

  var levelColumnIndex = 5;
  $('tr td:nth-child('+levelColumnIndex+')').each(function() {
    var cellText = $(this).html(); 
    if(cellText == 3){
              $(this).parent().css('background-color','red');
    } 
    });
});

This should highlight only rows with Level value equals to 3. Of course this solution is based on column index which should be known before. Fortunately jQuery handles nth-child in the absense of native browser support so you shouldn't bother if your browser doesn't support it.

Here is a working demo of my solution JSFiddle

Answer 3

$(document).ready(function () {
    $("input:checkbox").change(function () {
        alert();
        if ($(this).prop("checked") == true) {
            $(this).closest('tr').addClass("checked");
        } else $(this).closest('tr').removeClass("checked");
    });
});

.checked {
    background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr id="row_0" role="row" class="odd">
        <td class="sorting_1">
            <input type="checkbox" />
        </td>
        <td>Name</td>
    </tr>
</table>

Answer 4

You try this..

function hiliter(word, element) {
    var rgxp = new RegExp(word, 'g');
    var repl = '<span class="myClass">' + word + '</span>';
    element.innerHTML = element.innerHTML.replace(rgxp, repl);
}
hiliter('dolor');