Question

我有一个表，其类名为.myTab，

<table class="table table-bordered myTabl">
    <tr style="background:#ff0">
       <td>...</td>
    </tr>
    <tr style="background:#f00">
       <td>...</td>
    </tr>
    <tr style="background:#ff0">
       <td>...</td>
    </tr>
    <tr style="background:#f00">
       <td>...</td>
    </tr>
</table>

现在我要检查是否有任何行具有

background:#f00;

if ($(".myTabl table tr").css("background-color") == "f00"){
  $(".myTabl table tr").css({"background-color":"ff0"});
}

该怎么做？

Answer 1

您无需遍历表中的所有行并检查颜色是否为黄色（#ff0），而是可以将其用作选择器来选择所有黄色行：

$('.table tr[style*="background:#ff0;"]')

然后将匹配的元素的背景色更改为红色（#f00）：

.css({"background-color": "#f00"});

请参见下面的工作示例：

$('.table tr[style*="background:#ff0;"], .table tr[style*="background:#ffff00;"]').css({
  "background-color": "#f00"
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered myTabl">
  <tr style="background:#ff0;">
    <td>...</td>
  </tr>
  <tr style="background:#f00;">
    <td>...</td>
  </tr>
  <tr style="background:#ff0;">
    <td>...</td>
  </tr>
  <tr style="background:#f00;">
    <td>...</td>
  </tr>
  <tr style="background:#ffff00;">
    <td>...</td>
  </tr>
  <tr style="background:#ff00ff;">
    <td>...</td>
  </tr>
</table>

Answer 2

遍历行并在函数中获取style的{{1}}属性，并使用正则表达式查找tr的十六进制值并进行检查。

background

$(".myTabl tr").each(function(){
  var match = $(this).attr("style").match(/background\s*:\s*#(\w+)/);
  if (match != null && match[1] == "f00")
    $(this).css("background-color", "blue");
});

Answer 3

这里的逻辑存在几个问题。首先，您需要遍历所有tr元素并分别进行处理。您还需要将选择器固定为.myTabl的{{1}} ，所以附加的table选择器不正确。

然后，如果您检查table的输出，则会看到它的格式为css('background-color')，而不是十六进制或纯色名称。因此，您需要在rgb()条件下进行测试。试试这个：

if

$(".myTabl tr").each(function() {
  if ($(this).css('background-color').toLowerCase() === "rgb(255, 255, 0)") {
    $(this).css("background-color", "#f00");
  }
});

话虽如此，如果您仅使用类来设置颜色，就会简单得多。

我们如何使用jquery更改tr的背景颜色？

3 个答案: