Click-event in a table - change colors

Question

I'm doing a table with 6x6 columns () which are now empty with white background. My assignment is that when clicking on a column, it should change color between green, red and gray (depending on how many times you've clicked the specific column).

Code:

    <table style="width: 100%; height: 100%; margin: 0 auto; border-bottom:groove; border-left:groove; border-right:groove; border-top:groove; width: 75%; height: 75%;">
        <tr style="border-bottom:medium;">
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
        </tr>
        <tr>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
        </tr>
        <tr>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>

        </tr>
        <tr>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>

        </tr>
        <tr>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>

        </tr>
        <tr>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>

        </tr>
    </table>

I have no idea how to proceed, if I should use jQuery functions and such... Thankful for all answers/tips!

you can find it here http://stackoverflow.com/questions/7986581/jquery-change-table-cell-text-color-based-on-text use external stylesheets — Anusha kurra, May 08 '14 at 11:48
Do you want to change the colour of one cell or the whole column??? — Think Different, May 08 '14 at 11:56

score 2 · Accepted Answer · answered May 08 '14 at 12:02

Here is my solution. Hope this helps: http://jsfiddle.net/8gHeD/

HTML

<table class="grooveTable">
        <tr >
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>

        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>

        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>

        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>

        </tr>
    </table>

JavaScript

colorArray = ['none','red','green','blue'];

$('.grooveTable').on('click','td', function(){
    console.log( $(this).data('color') );
    console.log( colorArray.length );

    color = $(this).data('color') == undefined ? 0 : $(this).data('color')*1;

    if( color == undefined || color == colorArray.length )
    {
        $(this).css('background-color',colorArray[0]);
        $(this).data('color','0');
    }
    else
    {
        $(this).css('background-color',colorArray[color+1]);
        $(this).data('color',color+1);
    }
});

CSS

.grooveTable {
    width: 100%; 
    height: 100%; 
    margin: 0 auto; 
    border-bottom:groove;
    border-left:groove; 
    border-right:groove;
    border-top:groove;
}

.grooveTable td {
    cursor: pointer;
    border-bottom:groove; 
    border-left:groove; 
    border-right:groove; 
    border-top:groove;
}
.grooveeTable tr:first {
    border-bottom:medium;
}

Thank you so much for your help! Did change the: if (color == undefined || color == colorArray.length -1) — eliinka, Jun 17 '14 at 08:20

score 1 · Answer 2 · answered May 08 '14 at 11:52

FOR CHANGING BACKGROUND COLOUR OF THE WHOLE ROW: You can achieve it like the following: DEMO FIDDLE

$(document).ready(function(){

$('table').on('click','tr',function(){

    switch($(this).attr('class')){
        case 'green':
            $(this).removeClass('green');
            $(this).addClass('red');
            break;
        case 'red':
            $(this).removeClass('red');
            $(this).addClass('gray');
            break;
       case 'gray':
            $(this).removeClass('gray');
           // $(this).addClass('red');
            break;     
       default:
            $(this).addClass('green');                
    }
 });

});

FOR CHANGING BACKGROUND COLOUR OF SPECIFIC COLUMN:

$(document).ready(function(){

$('table').on('click','td',function(){

    switch($(this).attr('class')){
        case 'green':
            $(this).removeClass('green');
            $(this).addClass('red');
            break;
        case 'red':
            $(this).removeClass('red');
            $(this).addClass('gray');
            break;
       case 'gray':
            $(this).removeClass('gray');
           // $(this).addClass('red');
            break;     
       default:
            $(this).addClass('green');                
    }
 });

});

@sudharsan I thought he meant the whole row. I have asked the user now waiting for the answer. Thanks anyway — Think Different, May 08 '14 at 11:57

Abdennour TOUMI · Answer 3 · 2014-05-08T12:06:53.100

DEMO : http://jsfiddle.net/abdennour/6K6gU/3/

Our code work on column and not rows . This is what you want

 $('td').click(function(){

          var col=$('tbody td:nth-child('+($(this).parent('tr').index()+1)+')')
          if($(this).hasClass('green')){
               col.removeClass().addClass('red')
          }else if($(this).hasClass('red')){
               col.removeClass().addClass('gray')
          }
            else if($(this).hasClass('gray')){
              col.removeClass().addClass('gray')
          }else {
               col.removeClass().addClass('green')
          }


        })

UPDATE :

if you want : White -> Green-> Red-> Gray --> White

See : http://jsfiddle.net/abdennour/6K6gU/4/

Not working. If you click one first cell then click on the second cell in the same row. It breaks — Think Different, May 08 '14 at 11:59

score 0 · Answer 4 · answered May 08 '14 at 12:26

Just include a jquery file in your page and use the following script

        <script>
            $("table td").on("click", function () {             
                if ($(this).data("isDirty") != undefined) {
                    switch($(this).data("isDirty")) {
                        case '1':                                 
                            $(this).css("background-color", "gray");
                            $(this).data("isDirty", '2');
                            alert($(this).data("isDirty"));
                            break;
                        case '2':                                
                            $(this).css("background-color", "red");
                            $(this).data("isDirty", '3');                                
                            break;
                        default:
                            $(this).css("background-color", "black");
                            $(this).data("isDirty", '4');
                    }                        
                }
                else {
                    $(this).data("isDirty","1");
                    $(this).css("background-color", "green");                        
                }
            });
        </script>

Click-event in a table - change colors

4 Answers4