如何使用jquery查找背景颜色为黄色的所有行？

Question

I would like to find all rows with attribute background-color=rgb(255, 255, 0) . Pressing on the button 'Search' should do this. I don't understand why this is not working. Nothing is found. Code for searching:

$("#btnSearch").click(function(){  
  var rows = $("#tbl1 tr[style='background-color:rgb(255, 255, 0)']");     
})

Whole example is here

Answer 1

The clean approach would be to use a class instead of inline styles.

 $("#btnSearch").click(function() { console.log($('#tbl1 tr.yellow')) }) 

 .yellow { background-color: rgb(255, 255, 0); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id='tbl1' class="table table-hover table-bordered"> <thead> <tr> <th>#</th> <th>Ime izdelka</th> <th>Opisni REF</th> <th>LOT/serijska/EDI</th> <th>Stanje (REF)</th> <th>Stanje (LOT)</th> <th>Privzeta skupina</th> </tr> </thead> <tfoot> </tfoot> <tbody> <tr class="yellow"> <td data-id="iROW_NUMBER" style="background-color: rgb(255, 255, 0);">1</td> <td data-id="cPROD_NME" style="background-color: rgb(255, 255, 0);">Kortikalni 2.0/14mm (zlati)</td> <td data-id="cPROD_DCD" style="background-color: rgb(255, 255, 0);">401.364</td> <td data-id="cPRSE_DCD" style="background-color: rgb(255, 255, 0);">8036572</td> <td data-id="iPROD_QUA_QUA" style="background-color: rgb(255, 255, 0);">6</td> <td data-id="cPRSS_QUA_QUA" style="background-color: rgb(255, 255, 0);">3</td> <td data-id="cPRGR_NME" style="background-color: rgb(255, 255, 0);">Stopalo - SYNTHES</td> </tr> <tr class="yellow"> <td data-id="iROW_NUMBER" style="background-color: rgb(255, 255, 0);">2</td> <td data-id="cPROD_NME" style="background-color: rgb(255, 255, 0);">Kortikalni 2.0/14mm (zlati)</td> <td data-id="cPROD_DCD" style="background-color: rgb(255, 255, 0);">401.364</td> <td data-id="cPRSE_DCD" style="background-color: rgb(255, 255, 0);">8327937</td> <td data-id="iPROD_QUA_QUA" style="background-color: rgb(255, 255, 0);">6</td> <td data-id="cPRSS_QUA_QUA" style="background-color: rgb(255, 255, 0);">1</td> <td data-id="cPRGR_NME" style="background-color: rgb(255, 255, 0);">Stopalo - SYNTHES</td> </tr> <tr> <td data-id="iROW_NUMBER">3</td> <td data-id="cPROD_NME">Kortikalni 2.0/14mm (zlati)</td> <td data-id="cPROD_DCD">401.364</td> <td data-id="cPRSE_DCD">9572333</td> <td data-id="iPROD_QUA_QUA">6</td> <td data-id="cPRSS_QUA_QUA">2</td> <td data-id="cPRGR_NME">Stopalo - SYNTHES</td> </tr> </tbody> </table> <br/> <br/> <button id="btnSearch">Search</button> 

Answer 2

Try this..

 $("#btnSearch").click(function(){ $("#tbl1 tr").each(function () { if($(this).css("background-color") == "rgb(255, 255, 0)") { alert('I am Yellow ;)'); } else{ alert('I am White ;)'); } }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id='tbl1' class="table table-hover table-bordered"> <thead> <tr> <th>#</th> <th>Ime izdelka</th> <th>Opisni REF</th> <th>LOT/serijska/EDI</th> <th>Stanje (REF)</th> <th>Stanje (LOT)</th> <th>Privzeta skupina</th> </tr> </thead> <tfoot> </tfoot> <tbody> <tr style="background-color: rgb(255, 255, 0);"> <td data-id="iROW_NUMBER" style="background-color: rgb(255, 255, 0);">1</td> <td data-id="cPROD_NME" style="background-color: rgb(255, 255, 0);">Kortikalni 2.0/14mm (zlati)</td> <td data-id="cPROD_DCD" style="background-color: rgb(255, 255, 0);">401.364</td> <td data-id="cPRSE_DCD" style="background-color: rgb(255, 255, 0);">8036572</td> <td data-id="iPROD_QUA_QUA" style="background-color: rgb(255, 255, 0);">6</td> <td data-id="cPRSS_QUA_QUA" style="background-color: rgb(255, 255, 0);">3</td> <td data-id="cPRGR_NME" style="background-color: rgb(255, 255, 0);">Stopalo - SYNTHES</td> </tr> <tr style="background-color: rgb(255, 255, 0);"> <td data-id="iROW_NUMBER" style="background-color: rgb(255, 255, 0);">2</td> <td data-id="cPROD_NME" style="background-color: rgb(255, 255, 0);">Kortikalni 2.0/14mm (zlati)</td> <td data-id="cPROD_DCD" style="background-color: rgb(255, 255, 0);">401.364</td> <td data-id="cPRSE_DCD" style="background-color: rgb(255, 255, 0);">8327937</td> <td data-id="iPROD_QUA_QUA" style="background-color: rgb(255, 255, 0);">6</td> <td data-id="cPRSS_QUA_QUA" style="background-color: rgb(255, 255, 0);">1</td> <td data-id="cPRGR_NME" style="background-color: rgb(255, 255, 0);">Stopalo - SYNTHES</td> </tr> <tr> <td data-id="iROW_NUMBER">3</td> <td data-id="cPROD_NME">Kortikalni 2.0/14mm (zlati)</td> <td data-id="cPROD_DCD">401.364</td> <td data-id="cPRSE_DCD">9572333</td> <td data-id="iPROD_QUA_QUA">6</td> <td data-id="cPRSS_QUA_QUA">2</td> <td data-id="cPRGR_NME">Stopalo - SYNTHES</td> </tr> </tbody> </table> <br/> <br/> <button id="btnSearch">Search</button> 

Answer 3

The characters string you use should be the same on the jQuery and the HTML.

In your jQuery you forgot the semicolon ; and a space after the : .

Try this string.

#tbl1 tr[style='background-color: rgb(255, 255, 0);']

Anyway, I dont recomend you to use inline styles this way.

Answer 4

Use jQuery .filter() to filtering selected tr and select only tr has target background color. In function callback get background-color of tr using this.style.backgroundColor and check that is equal to rgb(255, 255, 0) or not.

$("#btnSearch").click(function(){
  var trs = $("#tbl1 tr").filter(function(){
    return this.style.backgroundColor == "rgb(255, 255, 0)";
  });
});

Note that in the bottom example after click, color of target tr changed to red .

 $("#btnSearch").click(function(){ $("#tbl1 tr").filter(function(){ return this.style.backgroundColor == "rgb(255, 255, 0)"; }).css("color", "red"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id='tbl1' class="table table-hover table-bordered"> <tr style="background-color: rgb(255, 255, 0);"> <td>1</td><td>2</td><td>3</td> </tr> <tr style="background-color: rgb(255, 255, 255);"> <td>1</td><td>2</td><td>3</td> </tr> <tr style="background-color: rgb(0, 0, 0);"> <td>1</td><td>2</td><td>3</td> </tr> <tr style="background-color: rgb(255, 255, 0);"> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>1</td><td>2</td><td>3</td> </tr> </table> <button id="btnSearch">Search</button> 

Check result of code on full html in demo

Answer 5

Try this;

$('#tbl1 tr').filter(function() {
     return $(this).css('background-color') == 'rgb(255, 255, 0)';
})