JavaScript Change Row Color Dynamically

Question

i have gone thorugh all the answers for my question but for me anuthing doesnt seem to be work. I want to blink my table row color

Here is Code : Currently it showing only purple color with no blink

$(document).ready(function() {
    openticketPageLoad();
    setInterval(findYellow, 1000);

    function findYellow() {
        $('#divOutputWindow').find('tr').each(function() {
            var $this = $(this);
            if ($this.css("background-color") == "purple") {
                $this.css("background-color", "white")
            } else {
                $this.css("background-color", "purple")
            }
        })
    }
});

HTML is generated using jQuery(CSS)+Ajax+Some Code behind CS File Here is code i got from "Inspect Element"

<tr class="ui-state-default2 ui-pgrid-table-row-visible" style="background-color: purple; "><td class="ui-pgrid-table-expander"></td>
            <td class="ui-pgrid-table-cell-sorted"><input name="ctl391" type="checkbox" id="chkTicket_189293" class=" chkTicket" value="189293"></td><td>189293</td><td><input name="ctl392" type="text" id="txtVendorTicket_189293" class=" vendorTicket" onblur="" value=""></td><td>SWCW35216</td><td>FLM</td><td>SDB CISCO</td><td>Open</td><td>CASH HANDLER FATAL ERROR,CASSETTE FAULTED</td><td>04-08-2012 13:36:31</td><td>04-08-2012 14:05:00</td><td>4.52</td><td>System</td>
        </tr>

@AymanSafadi the html really is not needed in this question, it is an error with the javascript code. — Jon Taylor, Aug 04 '12 at 13:00

score 1 · Answer 1 · answered Aug 04 '12 at 12:58

1

background-color will almost certainly not return a value "purple" it will return either rgb or hex value (I believe this is dependant on browser). So you need to test against the equivalent rgb or hex value that relates to "purple".

For this reason your code will always goto the else part of your if/else statement. Thus always producing a purple background color.

answered Aug 04 '12 at 12:58

Jon Taylor

7,865
5
30
55

I've given you the solution, compare against the rgb or hex value (depending on what the background-color attribute returns). – Jon Taylor Aug 04 '12 at 13:02
http://stackoverflow.com/questions/5999209/jquery-how-to-get-the-background-color-code-of-an-element – Jon Taylor Aug 04 '12 at 13:03
Or, search for what ever condition causes the background color to be purple. And instead of collecting all the rows and looking at each one, it would be faster to put the criteria in the jQuery filter if possible. – Steve Wellens Aug 04 '12 at 13:03
He shouldn't compare to hex values, this is a classification, he should use class attribute and jQuery class function (hasClass, addClass, removeClass, toggleClass) instead. Don't depend on arbitrary values in the middle of the code.. – Aadaam Aug 04 '12 at 13:04
I agree that you should check classes etc however if you were to compare colour values I was pointing out the reason this does not work and giving a solution to this. – Jon Taylor Aug 04 '12 at 13:07

Aadaam · Answer 2 · 2012-08-04T13:13:59.043

0

That's because $this.css("background-color") doesn't come as string, but rather an rgb or rgba color specification.

Use class instead:

.purple {
  background-color: purple;
}
.white {
  background-color: white;
}

and

 $(document).ready(function() {
        openticketPageLoad();
        setInterval(findYellow, 1000);
        function findYellow() {
            $('#divOutputWindow').find('tr').each(function() {
            var $this = $(this);
            $this.toggleClass('purple');
            $this.toggleClass('white', !$this.hasClass('purple'); // toggle to white if it's not purple
            })
        }
    });

See it in action: http://jsfiddle.net/xWRZx/

edited Aug 04 '12 at 13:13

answered Aug 04 '12 at 13:02

Aadaam

3,579
1
14
9

But where is White toggleClass Here ? – Shaggy Aug 04 '12 at 13:11
@Sagar Dumbre: Edited, but you could also add a white background by CSS __#divOutputWindow tr { background-color: white }__ by default I guess – Aadaam Aug 04 '12 at 13:15

score 0 · Answer 3 · answered Aug 04 '12 at 13:10

The .css getter does not retrieve .style propeties, it retrieves getComputedStyle or .currentStyle(In IE). So it is not symmetric with the .css setter which sets .style properties on the element.

So you can never reliably get the color like this and must use some color normalization library because the values can vary between browsers.

Your use case however doesn't require this as you can simply just use css classes.

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

I propose a simpler, more semantic solution:

HTML

<div id="divOutputWindow">
    <table>
        <tr>
            <td>foo</td>
            <td>bar</td>
        </tr>
        <tr>
            <td>hello</td>
            <td>world</td>
        </tr>
        <tr>
            <td>lazy</td>
            <td>fox</td>
        </tr>
    </table>
</div>

CSS

#divOutputWindow tr {
    background-color: white;
}

#divOutputWindow tr.highlighted {
    background-color: purple;
}

JS

setInterval(findYellow, 1000);
function findYellow() {
    $('#divOutputWindow').find('tr').each(function() {
        $(this).toggleClass('highlighted');
    });
}

LIVE DEMO

http://jsfiddle.net/Y6NwR/

JavaScript Change Row Color Dynamically

4 Answers4

HTML

CSS

JS

LIVE DEMO