如何更改表中项目的背景

how can i change the background of an item in the table?

本文关键字：背景 项目 何更改      更新时间：2023-09-26

可能重复：
我想在点击后更改背景颜色吗？

如何更改表中项目的背景？

当鼠标在任何项目上时，它的颜色都会改变，所以我使用了CSS代码：

.meun:hover{
         background-color: #EFF2F7;
}

这很好，所以为了改变点击项目的背景颜色，我使用了这个小java脚本代码

function getclick(elem)
{
    elem.style.backgroundColor = '#EFF2F7';
}

所以我现在想，如果我点击了其他项目，上一个项目会返回默认颜色，即white，下一个项目更改，css中的hover会继续工作，就像facebook左菜单一样。。。

有关更多详细信息，这是我写的代码

http://jsfiddle.net/NA8Dj/

您可以将具有自定义样式的css类(而不是显式设置背景色(添加到这些元素中，然后修改您的函数，如：

function getclick(elem)
{
//find any elemenet with given class
//remove that class from it
//add that class to 'elem'
}

我不知道纯javascript的正确语法，但使用jQuery，它可能是：

// find any element with given class and remove it
$('.yourClass').removeClass('yourClass');
// add that class to clicked element
elem.addClass('yourClass');

您可以在这里看到工作示例
顺便说一句：你的例子对我不起作用。

这里有一个纯JavaScript版本。它使用事件委派，这意味着只有一个点击处理程序分配给表，而不是分配给每个单元格：

(function() {
    var current,
        table = document.getElementById('table'); // I gave the table 
                                                  // the uncreative ID `table`
    table.onclick = function(event) {
        event = event || window.event;
        var target = event.target || event.srcElement;
        if(target.nodeName !== 'TD') {
            do {
               target = target.parentNode;
            } while(target && target.nodeName !== 'TD');
        }
        if(target) {
            if(current) {
                current.style.backgroundColor = '';
            }
            target.style.backgroundColor = '#EFF2F7';
            current = target;
        }
    };
}());

DEMO

相关文章：