How to you change a gridview rows background color for chrome

I am using vb.net.
I have a gridview with a checkbox in column 0. When the checkbox is selected it fires a script that changes the background color of the row. It works fine in internet explore but not in chrome. I set the checkboxes onclick in the gridview's rowdatabound event. Here is my script code
<script type="text/javascript">
    //variable that will store the current color of the selected row
    var RowColor;
    function ChangeRowColor(row) {
        //get the color of the selecte row
        RowColor = document.getElementById(row).currentStyle.backgroundColor;
        // if current color is white then change it to blue
       if (RowColor == "#ffffff") {
            // change the color to blue
           document.getElementById(row).style.backgroundColor = "#3399FF";
        }
        // if current color is white then change it to blue  
        else if (RowColor == "white") {
        document.getElementById(row).style.backgroundColor = "#3399FF";
        }
        else
        //  current color is blue then change it to white
        {
            document.getElementById(row).style.backgroundColor = "#ffffff";


        }
    }
     </script>

How do I get this to work in chrome?
whiwexAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Robert SchuttSoftware EngineerCommented:
Chrome doesn't support currentStyle, that's IE only. You could probably use getComputedStyle() (also supported by IE9+) but I think it's a bit unnecessary (it's relatively costly) because on subsequent calls for the same row it would always be sufficient to check .style as that is set by your function. So another option would be to check for some defaults that you may encounter on the first call for a row. Or even make sure a background color is always set in the style but that is not recommended for another reason. In the end what you should probably be doing is not set background-color but toggle a 'selected' class which defines the alternate color. You wouldn't happen to be using jQuery on this page, would you? That would make it a lot easier. But there are implementations to be found to toggle classes without jQuery.

Anyway, option 1 (used directly here, alternatively you could use a cross-browser helper function from the web, for example at the bottom of this quirksmode.org page):
            if (document.getElementById(row).currentStyle) {
                RowColor = document.getElementById(row).currentStyle.backgroundColor;
            } else {
                RowColor = window.getComputedStyle(document.getElementById(row)).backgroundColor;
            }

Open in new window

and option 2, use style directly and check for more initial values (may be needed anyway, also in the above code, depending on the rest of your page/css):
            RowColor = document.getElementById(row).style.backgroundColor;
            // if current color is white then change it to blue 
            if (RowColor == "#ffffff" || RowColor == "white" || RowColor == "transparent" || RowColor == "" || RowColor == "rgb(255, 255, 255)" || RowColor == "rgba(0, 0, 0, 0)") {
                // change the color to blue
                row.style.backgroundColor = "#3399FF";
            }
            else
            //  current color is blue then change it to white
            {
                row.style.backgroundColor = "#ffffff";
            }

Open in new window

To check the actual value it's always a good idea to use the tools at your disposal, specifically the IE/Chrome developer tools (F12) can show you what's going wrong with your script.

And like I said earlier, if it's an option to use jQuery there's a much simpler solution:
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('input:checkbox').click(function () {
                $(this).closest('tr').toggleClass('selected');
            });
        });
     </script>
     <style>
        .selected {
            background-color: #3399FF;
        }
     </style>

Open in new window

Note that this handles clicking on any checkbox so it would need some work to fit into your page (maybe just remove your current change/click handler code) but hopefully the basic idea is clear.

If you need help implementing any of these solutions in your page, please share your relevant code or generated html (from your browser's "view source") so that it's clearer where it would need to go.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.