Based on a Href Value Highlight Row Matching ID from Href Link

Question

Basically when a user clicks on a specific link that I have set-up within an SVG graph view on a page, using a click event that calls window.location.href I would like it to branch to a report (html table via anchor tag) that is below the graph and highlight the rows red, matching the rule id, say where rule id equals 90 , passed as part of the href link.

I would like to see in my example below, rows 1 and 4 highlighted red to notify the user which rules are affected.

I would also like a means of first resetting the table highlights, just in case they exists from a previous click based on a different rule id href click.

I realise that I will need to use a jQuery .each() function, but just not sure how to check for Rule = 90 and highlight that entire row.

HTML table may look like the following:

<table class="rule-table" style="width:100%">
<tbody>
<tr>
    <th>Number</th>
    <th>Rule</th>  
    <th>First Name</th>
    <th>Points</th>
</tr>
<tr>
    <td>1</td>
    <td class="the-rule">90</td>  
    <td>Eve</td>
    <td>Jackson</td>        
    <td>94</td>
</tr>
<tr>
    <td>2</td>
    <td class="the-rule">87</td>  
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
</tr>
<tr>
    <td>3</td>
    <td class="the-rule">22</td>    
    <td>Adam</td>
    <td>Johnson</td>        
    <td>67</td>
</tr>
<tr>
    <td>4</td>
    <td class="the-rule">90</td>    
    <td>Jill</td>
    <td>Smith</td>      
    <td>50</td>
</tr>
</tbody>
</table>

Answer 1

Use :contains() jQuery selector to filter elements and .css() to set the values. .closest('tr') will get the parent row.

var hrefValue = 90;
$('td.the-rule:contains('+hrefValue+')').closest('tr').css('background-color', 'red');

* _{Note : :contains() finds match in the whole text node.}

 $(document).ready(function(){ var hrefValue = 90; $('td.the-rule:contains('+hrefValue+')').closest('tr').css('background-color', 'red'); }) 

 <script src="https://code.jquery.com/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <table class="rule-table" style="width:100%"> <tbody> <tr> <th>Number</th> <th>Rule</th> <th>First Name</th> <th>Points</th> </tr> <tr> <td>1</td> <td class="the-rule">90</td> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>2</td> <td class="the-rule">87</td> <td>John</td> <td>Doe</td> <td>80</td> </tr> <tr> <td>3</td> <td class="the-rule">22</td> <td>Adam</td> <td>Johnson</td> <td>67</td> </tr> <tr> <td>4</td> <td class="the-rule">90</td> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> </tbody> </table> 

Answer 2

You could use .filter and return elements containing roleId .

var ruleId = 90;
$ruleTd = $('.the-rule');
$('.rule-table tr').css('background-color', 'white');
$ruleTd.filter(function(td){
    return parseInt($(this).text()) === ruleId;
}).parent().css('background-color', 'red');

 $(document).ready(function(){ var ruleId = 90; $ruleTd = $('.the-rule'); $('.rule-table tr').css('background-color', 'white'); $ruleTd.filter(function(){ return parseInt($(this).text()) === ruleId; }).parent().css('background-color', 'red'); }) 

 <script src="https://code.jquery.com/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <table class="rule-table" style="width:100%"> <tbody> <tr> <th>Number</th> <th>Rule</th> <th>First Name</th> <th>Points</th> </tr> <tr> <td>1</td> <td class="the-rule">90</td> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>2</td> <td class="the-rule">87</td> <td>John</td> <td>Doe</td> <td>80</td> </tr> <tr> <td>3</td> <td class="the-rule">22</td> <td>Adam</td> <td>Johnson</td> <td>67</td> </tr> <tr> <td>4</td> <td class="the-rule">90</td> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> </tbody> </table>