Apply css to tr with custom data attribute in JQuery

Question

I have a table, each tr element has a custom data attribute and I want to apply style to certain values.

In HTML:

<table id="notify" class="t_notify">
<tr data-notify="101">
 <td>data</td>
 <td>data</td>
</tr>
<tr data-notify="102">
 <td>data</td>
 <td>data</td>
</tr>
<!-- and goes -->
</table>

With CSS:

.t_notify>tbody>tr{background:#BBB;}
.t_notify>tbody>tr:hover{background:transparent;}

I tried in Jquery to make this when I click in a certain tr element, for example:

$("#notify > tbody > tr").attr("[data-notify='101']").css({"background":"#CCC"});

But this doesn't work. I would like some help.

Answer 1

Good Approach

Your query must be in the selector, like so :

 $("#notify > tbody > tr[data-notify='101']").css({"background":"#CCC"}); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="notify" class="t_notify"> <tr data-notify="101"> <td>data</td> <td>data</td> </tr> <tr data-notify="102"> <td>data</td> <td>data</td> </tr> <!-- and goes --> </table> 

attr()

The attr() function returns the value of the attribute or sets it. In your case, you want neither. Hope it helps.

Answer 2

Your issue is that attr() is intended to be used to get/set an attribute. It doesn't filter the elements in a collection. Instead you should use the attribute selector in the primary jQuery object.

Also, just to note that in the example below I changed the highlight colour as #BBB is very hard to spot against #CCC . I also amended the code to use addClass() , as you should avoid the use of css() where possible, as it ties the JS code too closely to the UI. Finally, I amended the CSS rules so that operator precedence works for all scenarios.

 $("#notify > tbody > tr[data-notify='101']").addClass('foo'); 

 .t_notify tr { background: #BBB; } .t_notify > tbody > tr:hover { background: transparent; } .t_notify tr.foo { background-color: #C00; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="notify" class="t_notify"> <tr data-notify="101"> <td>data</td> <td>data</td> </tr> <tr data-notify="102"> <td>data</td> <td>data</td> </tr> <!-- and goes on... --> </table> 

Answer 3

Put the data in the selector: Demon on JsFiddle

 $("#notify > tbody > tr[data-notify='101']").css({"background":"#CCC"}); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="notify" class="t_notify"> <tr data-notify="101"> <td>data</td> <td>data</td> </tr> <tr data-notify="102"> <td>data</td> <td>data</td> </tr> <!-- and goes --> </table> 

The CSS attribute selector matches elements based on the presence or value of a given attribute.

/* <a> elements with a title attribute */
a[title] {
  color: purple;
}

/* <a> elements with an href matching "https://example.org" */
a[href="https://example.org"] {
  color: green;
}

/* <a> elements with an href containing "example" */
a[href*="example"] {
  font-size: 2em;
}

/* <a> elements with an href ending ".org" */
a[href$=".org"] {
  font-style: italic;
}

source

Answer 4

$("#notify > tbody > tr").attr("[data-notify='101']")

应该：

$("#notify > tbody > tr[data-notify='101']")