Jquery 单击事件<；td>；在桌子上-改变颜色

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

代码：

我不知道如何继续，如果我应该使用jQuery函数之类的。。。

---

感谢所有的答案/提示

用于更改整行的背景颜色： 您可以通过以下方式实现：

---

更改特定列的背景颜色：

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

});

---

演示：

我们的代码处理列而不是行。这就是你想要的

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


        })

更新：

如果您想要： 白色->绿色->红色->灰色-->白色

见：

---

这是我的解决方案。希望这有助于：

HTML

CSS

---

只需在页面中包含一个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>

$（“表td”）。在（“单击”上，函数（）{
if（$（this）.data（“isDirty”）！=未定义）{
开关（$（this.data（“isDirty”））{
案例“1”：
$（this.css（“背景色”、“灰色”）；
$（this）.data（“isDirty”，“2”）；
警报（$（this.data（“isDirty”））；
打破
案例“2”：
$（this.css（“背景色”、“红色”）；
$（this）.data（“isDirty”，“3”）；
打破
违约：
$（this.css（“背景色”、“黑色”）；
$（this）.data（“isDirty”，“4”）；
}                        
}
否则{
美元（此）。数据（“isDirty”、“1”）；
$（this.css（“背景色”、“绿色”）；
}
});

单击列或单击单元格？第一个提示：避免使用内联样式，并使用单独的样式表。您可以在此处找到它使用外部样式表您想更改一个单元格或整个列的颜色吗？他不想更改列的颜色row@sudharsan我以为他指的是整排人。我已经询问了正在等待答案的用户。不管怎样，谢谢你没用。如果单击第一个单元格，则单击同一行中的第二个单元格。太感谢你的帮助了！是否更改了：if（color==undefined | | color==colorArray.length-1）

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


        })

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

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);
    }
});

.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;
}

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