Question

我想查找属性为background-color=rgb(255, 255, 0)的所有行。按下按钮＆＃39;搜索＆＃39;应该这样做。我不明白为什么这不起作用。什么都没找到。搜索代码：

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

整个例子是here

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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具有目标背景颜色。在函数回调中使用background-color获取tr的this.style.backgroundColor并检查它是否等于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>

检查demo

中完整html的代码结果

Answer 5

试试这个;

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

Answer 6

试试这个，

＆＃13;

$("#btnSearch").click(function() {
  var a = $('#tbl1').find("tr").filter(function() {
    return $(this).css('background-color') == 'rgb(255, 255, 0)';
  });
  $.each(a, function(i, j) {
    console.log($(this).find("td[data-id='cPRSE_DCD']").html());
  });
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<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>

＆＃13;

由于有一个具有差值的td，您可以查看。

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

6 个答案: