Search code examples
javascriptjqueryhtmlcssbackground-color

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


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


Solution

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