How to find all rows with background-color yellow using 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

Possible duplicate of http://stackoverflow.com/questions/282198/selecting-elements-with-a-certain-background-color ? — kevin b., Apr 03 '17 at 11:34
Instead of using inline styles, consider using a class for the elements. A class can easily be found and is also clearer — baao, Apr 03 '17 at 11:37

score 3 · Accepted Answer · answered Apr 03 '17 at 11:39

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>

How to set class on the rows once they are found? Let's say I want to change class yellow on all rows to '' (no class, empty string.) Basically I want to delete yellow class from rows with that class. — FrenkyB, Apr 03 '17 at 11:43
Just use removeClass() @FrenkyB `$('#tbl1 tr.yellow').removeClass("yellow")` — baao, Apr 03 '17 at 11:45

score 2 · Answer 2 · answered Apr 03 '17 at 11:37

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>

score 1 · Answer 3 · answered Apr 03 '17 at 11:41

1

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.

answered Apr 03 '17 at 11:41

jaumemk

122
6

Is this working for you? I've tried to add ; and space after : but it's the same. – FrenkyB Apr 03 '17 at 11:45
Yes its working for me on Chrome. See my forked code from yours: http://codepen.io/anon/pen/evxqXO – jaumemk Apr 03 '17 at 11:48

Mohammad · Answer 4 · 2017-04-03T11:53:41.583

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

score 0 · Answer 5 · answered Apr 03 '17 at 11:33

0

Try this;

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

answered Apr 03 '17 at 11:33

KOUSIK MANDAL

2,002
1
21
46

How to find all rows with background-color yellow using jquery?

5 Answers5