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>

with a small modification you could do it only using CSS. Just put the level value as an attrtibute-value to the td element, then you can use attribute value css selectors. — Legends
– Legends, Commented Dec 18, 2016 at 10:35
Hi, Thanks for the code but, i dont want to highlight the text when check box is checked, i want the script to check if the case row has level 3, if yes then highlight it, check box is irrelevant. — Cyb3rHac3r
– Cyb3rHac3r, Commented Dec 18, 2016 at 10:41

Artur Skrzydło · Accepted Answer · 2016-12-18 10:59:40Z

1

$(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

answered Dec 18, 2016 at 10:59

Artur Skrzydło

1,16520 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Karthick Nagarajan · Accepted Answer · 2016-12-18 10:23:10Z

0

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');

answered Dec 18, 2016 at 10:23

Karthick Nagarajan

1,3462 gold badges15 silver badges29 bronze badges

Comments

Suraz Khanal · Accepted Answer · 2016-12-18 10:28:03Z

0

$(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>

answered Dec 18, 2016 at 10:28

Suraz Khanal

2221 gold badge5 silver badges17 bronze badges

Comments

Deep · Accepted Answer · 2016-12-18 11:39:21Z

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>

your welcome , just keep in mind that the accepted answer is valid only till you do not change the order of columns. If you change that you will have to calculate the position, you will have to use this solution in that case.

Collectives™ on Stack Overflow

Highlight texts using JavaScript or jQuery

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related