文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >单击表中的事件<td> -更改颜色

问单击表中的事件<td> -更改颜色
EN

Stack Overflow用户
提问于 2014-05-08 11:39:50
回答 4查看 1.9K关注 0票数 1

我正在做一个6x6列()的表，这些列()现在是空的，背景是白色的。我的任务是，当单击一列时，它应该在绿色、红色和灰色之间改变颜色(取决于单击特定列的次数)。

代码：

​

代码语言：javascript
复制
    <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函数.感谢所有的答案/提示！

jquery
css
.net
html
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2014-05-08 12:02:24

这是我的解决办法。希望这能帮上忙：http://jsfiddle.net/8gHeD/

HTML

代码语言：javascript
复制
<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

代码语言：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

代码语言：javascript
复制
.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;
}
票数 2
EN

Stack Overflow用户

发布于 2014-05-08 11:52:03

用于更改整行的背景色:您可以像下面这样实现它：演示小提琴

代码语言：javascript
复制
$(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');                
    }
 });

});

更改特定栏的背景颜色：

代码语言：javascript
复制
$(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');                
    }
 });

});
票数 1
EN

Stack Overflow用户

发布于 2014-05-08 11:56:26

演示: http://jsfiddle.net/abdennour/6K6gU/3/

我们的代码工作在列上而不是行上。这就是你想要的

代码语言：javascript
复制
 $('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')
          }


        })

更新:

如果你想要:白色->绿色->红色->灰色->白色

请参阅：http://jsfiddle.net/abdennour/6K6gU/4/

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/23540706

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档