表格中的点击事件 - 更改颜色

Question

我正在做一个带有6x6列（）的表，它现在是空的，带有白色背景。 我的任务是，当点击一列时，它应该在绿色，红色和灰色之间改变颜色（取决于你点击特定列的次数）。

代码：

    <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>

我不知道如何继续，如果我应该使用jQuery函数等... 感谢所有答案/提示！

Answer 1

改变整个行的背景颜色： 您可以像下面这样实现它：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');                
    }
 });

});

更改特定栏的背景颜色：

$(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');                
    }
 });

});

Answer 2

这是我的解决方案。希望这会有所帮助：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;
}

Answer 3

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

我们的代码适用于列而非行。这就是你想要的

 $('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')
          }


        })

更新：

如果你想： 白色 - ＆gt;绿光＆GT;红 - ＆GT;灰色 - ＆gt;白色

见： http://jsfiddle.net/abdennour/6K6gU/4/

Answer 4

只需在页面中包含一个jquery文件，然后使用以下脚本

        <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>