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

Question

我想找到属性为background-color=rgb(255, 255, 0)所有行。 按“搜索”按钮可以执行此操作。 我不明白为什么这不起作用。 什么都没找到。 搜索代码：

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

整个例子就在这里

Answer 1

干净的方法是使用类而不是内联样式。

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

尝试这个..

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

您使用的字符串在jQuery和HTML上应该是相同的。

在你的jQuery中你忘记了分号 ; 和一个空间 之后: 。

试试这个字符串。

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

无论如何，我不建议你这样使用内联样式。

Answer 4

使用jQuery .filter()过滤选定的tr并仅选择tr具有目标背景颜色。 在函数回调中使用this.style.backgroundColor获取tr的background-color ，并检查是否等于rgb(255, 255, 0) 。

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

请注意，在单击后的底部示例中，目标tr颜色变为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> 

在演示中检查完整html上的代码结果

Answer 5

尝试这个;

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