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

可能重复：

如何更改表中项目的背景

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

CSS

code:

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

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

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

所以我想现在如果我点击了其他项目，上一个项目返回它的默认颜色，即

白色

，下一个项目更改，css中的

悬停

继续工作，就像

facebook

左菜单一样

关于更多细节，这是我写的代码

---

您可以将自定义样式的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');

你可以看到。

---

顺便说一句：您的示例对我不起作用。

您可以将自定义样式的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;
        }
    };
}());

---

这是一个纯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;
        }
    };
}());

---

您愿意使用jQuery之类的JavaScript库吗？虽然，这将只是几行原始JavaScript。@免费，这不是dup。在第一个问题中，他使用CSS语法（

.background color

）作为javascript属性。在这个问题上，他从中吸取了教训，现在正试图引入悬停。为什么这会被标记为攻击性的？这不是重复。一个是关于更改单元格的背景颜色，另一个是关于更改单元格内项目的背景颜色。您愿意使用jQuery之类的JavaScript库吗？虽然，这将只是几行原始JavaScript。@免费，这不是dup。在第一个问题中，他使用CSS语法（

.background color

）作为javascript属性。在这个问题上，他从中吸取了教训，现在正试图引入悬停。为什么这会被标记为攻击性的？这不是重复。一个是关于更改单元格的背景颜色，另一个是关于更改该单元格内项目的背景颜色。