Question

基本上当用户点击我在页面上的SVG图表视图中设置的特定链接时，使用调用window.location.href的点击事件我希望它分支到报表（html表）通过锚标记）在图表下方并突出显示红色的行，与规则ID匹配，例如规则ID等于90 ，作为href链接的一部分传递。

我想在下面的示例中看到，第1行和第4行突出显示为红色，以通知用户哪些规则受到影响。

我还希望首先重置表格高亮显示，以防万一它们基于不同的规则ID href点击而存在于之前的点击中。

我意识到我需要使用jQuery .each()函数，但不知道如何检查Rule = 90并突出显示整行。

HTML表格可能如下所示：

<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

使用 :contains() jQuery选择器过滤元素，使用.css()设置值。 .closest('tr')将获得父行。

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

* _{注意：:contains()在整个文本节点中找到匹配项。}

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

您可以使用.filter并返回包含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');

＆＃13;

$(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');
})

＆＃13;

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

＆＃13;

基于来自Href链接的{h 44值突出显示行匹配ID

2 个答案: