如何使用jQuery更改TR的背景颜色?

Abdul Rahman • 6 年前 • 1802 次点击

我有一张有类名的桌子 .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"});
}

怎么做?

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/43682

1802 次点击

文章 [ 3 ] | 最新文章 6 年前

• 1 楼

Rory McCrossan 6 年前

你的逻辑有几个问题。首先你需要把所有的 tr 元素并单独处理它们。您还需要将选择器修复为 .myTabl 是这个 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");
  }
});

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

也就是说,如果你只是用类来设置颜色,那就简单多了。

• 2 楼

Mohammad 6 年前

遍历行并在函数中获取 style 属性 tr 并使用regex查找十六进制值 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");
});

<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; font-size:12px">
     <td>...</td>
  </tr>
  <tr style="background:#ff0">
     <td>...</td>
  </tr>
  <tr style="font-size:12px; background   :   #f00">
     <td>...</td>
  </tr>
</table>

• 3 楼

Nick Parsons 6 年前

而不是检查表中的所有行并检查颜色是否为黄色( #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>

登录后回复