CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Abdul Rahman
Abdul Rahman

Reputation: 1705

How can we change the background color of a tr using jquery?

I have a table with class name .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>

Now i want to check if there is any row having 

background:#f00;

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

How to do this?

Upvotes: 1

Views: 140

Answers (3)

Nick Parsons
Nick Parsons

Reputation: 50639

Instead of going through all the rows within your table and checking if the color is yellow (#ff0) you can instead select all the yellow rows by using this as the selector:

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

And then change the matched elements' background colors to red (#f00):

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

See working example below:

$('.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>

Upvotes: 3

Rory McCrossan
Rory McCrossan

Reputation: 337550

There's several issues with your logic here. Firstly you need to loop through all the tr elements and work on them individually. You also need to fix your selector as .myTabl is the table, so the additional table selector is incorrect.

Then if you check the output from css('background-color') you'll see it's in rgb() format, not hex, or a plain colour name. As such you need to test for that in your if condition. Try this:

$(".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>

That being said, it would be much simpler if you just used classes to set the colours.

Upvotes: 1

Mohammad
Mohammad

Reputation: 21489

Loop through rows and in function get style attribute of tr and using regex find hex value of background and check it.

$(".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>

Upvotes: 1

Related Questions