OnClick changes TD cell color. How can I click to change it back?

Related searches

I have a button and when I click on this button I need to highlight the highest and lower values of my html table.

I set the background color of my highest table cell in this way and this works ok:

$HighElementToMark.css('background-color', HigherNumberColor);

How can i get the color assigned to $HighElementToMark?

I thought to use something like:

alert(HighElementToMark.style.backgroundColor);

But it doesn't work.

In addition I need to reset the color of my table cell when I click again on my button.

Any suggestions?

Thanks in advance

element.style is a setter only, meaning you can only set the style. In order to read the current style you can use getComputedStyle(element).backgroundColor. In order to keep track of the changes you might want to set a variable as a flag like isChange. But as we can't see your actual implementation it's hard to suggest anything truly useful

Edit TD on click, element.style is a setter only, meaning you can only set the style. In order to read the current style you can use getComputedStyle(element). it is working for only rows. its not working for cells. i want to change cells' (tds') background colors with mouse clicks. For example: a have a table, and it has 4 tds. table's background color is white. if i click to a td, a td should be red, than if i click to b, b td should be red and a td should be white again. if i click to c than, c

You can fetch the color in the following ways:

document.getElementById("HighElementToMark").style.backgroundColor 

$HighElementToMark.css('background-color')

Both of them will return the background-color property of the style. If you think about element.style as a setter only:

To return style properties: element.style.property To set style properties: element.style.property = value Note: It will only work on inline style declarations.

As for the toggling between colors, let's say we keep a boolean colorChange flag:

{  // we do this when button is clicked.
     colorChange = !colorChange; 

     var colorToSet = colorChange ? HigherNumberColor : SomeOtherColor;
     $HighElementToMark.css('background-color', colorToSet);
     console.log( $HighElementToMark.css('background-color') );
 }

This way we can use to the flag to track the toggling of the colors.

Change Background Color On Click, element.style is a setter only, meaning you can only set the style. In order to read the current style you can use getComputedStyle(element).backgroundColor . I want to have a 5 x 5 table and when i click in a td cell I would like the bgcolor to change to red. if i click in the same cell again I would like the color to change to blue and so on. I would like to be able to cycle through 5 different colors for each td cell. I haven't any idea on how to do this so any pointers would be really appreciated.

<html>
<head>
    <style>
        table {
            width: 75%;
        }
        table > tbody > tr td{
            background-color: #f44242;
        }

        .toggle{
            background-color: #024405;
        }
    </style>
        <script
        src="https://code.jquery.com/jquery-3.4.0.min.js"
        integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
        crossorigin="anonymous"></script>

</head>
<body>
        <table >
            <thead>
                <tr>
                    <th>
                        Column A
                    </th>
                    <th>
                        Column B
                        </th>
                        <th>
                        Column C
                            </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td id = "highlightMe" >9</td>
                    <td>6</td>
                    <td>3</td>
                </tr>
            </tbody>
        </table><br/>
        <button type="button" id="highlighter" >Highlight Me</button>

        <script>
            (function(window, document, undefined){
                var toggledColor = '#024405';
                $('#highlighter').click(function(){
                    var $HighElementToMark = $('#highlightMe'); //or your algorithm to identify the correct highest value td

                    /* Method 01 - toggling manually */
                    //$HighElementToMark.css('background-color', !$HighElementToMark.data('hasOriginalBG') ? toggledColor: '') ; //toggle background color
                    //$HighElementToMark.data('hasOriginalBG', ($HighElementToMark.data('hasOriginalBG') ? false : true)); //persist the current status

                    /* Method 02 - toggling using jquery togleclass */
                    //$HighElementToMark.toggleClass('toggle') ;  // you can also use jquery toggle class for this 
                });
            })(window, document);
        </script>
</body>

Q: How to change background color of table cells onClick? : javascript, Make table cells editable on click. On click – the cell should became “editable” ( textarea appears inside), we can change HTML. There should be no resize,� Add a var that will hold the "active" row and its original color, initialized to null. When the onclick occurs, if the var is not null, restore the previous before changing the clicked one.

Change Background Color On Click - HTML CSS and Javascript. 70,485 views 70K views Duration: 6:16 Posted: Jul 21, 2018 This must be very obvious to you guys, but can you advise a newbie to Excel VBA programming (not too bad in Access VBA) how to do the following: I want to click highlight a cell, then click on a button and change the cell back color to say Red ?

Hello! I am having some trouble changing the background color of my table cells If you had jQuery already, I'd recommend doing it as a $('table').on('click', 'td. Change TD bgColor onClick which TR it belongs to and changes color say from white to red). the event model to catch click events and determine the cell from

I have tried to use the onclick action to change the class to the td_on style like so, onclick="class=td_on" but this does NOT cause any changes. Can someone tell me what the proper syntax for doing this is or maybe an easier way to accomplish what I want???! TIA. Here - if you haven't gotten it, try this: This should be your TD in your HTML:

Comments
  • Once it is set like that, $HighElementToMark.css('background-color') should return the current color. It's not necessarily suitable for comparisons though. To reset the color, use $HighElementToMark.css('background-color', ''); (the alert you tried doesn't work because $HighElementToMark is a jQuery object; .style is a property of a regular HTMLElement though)
  • Here's one way: jsfiddle.net/khrismuc/L6mjk82x
  • Thanks a lot!!!