javascript 给相同元素指定同一事件怎么做？

Question

假如说是个table 给其中的多个单元格，指定一个相同事件（如：当鼠标悬停的时候更改背景色，移开恢复到以前的颜色），这个怎么做？不要给每个td 指定onmouseover 等事件、太麻烦、

Answer 1

var table=document.getElementById("table");
var trs = table.rows;
for(var i=1;i<trs.length;i++){
with(trs[i]){
if(i % 2 == 0){
with(this){
filters.apply();
style.background='#CBECFF';
style.border='1px solid #336699';
filters.play();
}
}else{
with(this){
filters.apply();
style.background='#F5F9FF';
style.border='1px solid #336699';
filters.play();
}
}
onclick=function(){
if(this.rowIndex != 0){
if(this.tag!='clicked'){
this.tag='clicked';
with(this){
filters.apply();
style.background='#FFD6A9';
style.border='1px solid #ffffff';
filters.play();
}
}else{
this.tag='';
if(this.rowIndex % 2 == 0){
with(this){
filters.apply();
style.background='#CBECFF';
style.border='1px solid #336699';
filters.play();
}
}else{
with(this){
filters.apply();
style.background='#F5F9FF';
style.border='1px solid #336699';
filters.play();
}
}
}
}
}
onmouseover=function(){
if(this.rowIndex != 0 && this.tag != 'clicked'){
with(this){
filters.apply();
style.background='#FFD9FB';
style.border='1px solid #ffffff';
filters.play();
}
}
}
onmouseout=function(){
if(this.rowIndex % 2 == 0){
if(this.tag != 'clicked'){
with(this){
filters.apply();
style.background='#CBECFF';
style.border='1px solid #336699';
filters.play();
}
}
}else{
if(this.tag != 'clicked'){
with(this){
filters.apply();
style.background='#F5F9FF';
style.border='1px solid #336699';
filters.play();
}
}
}
}
}
N年前写的了，不光有悬停，还有隔行换色，单击选中等功能。
现在用jquery的selectable应该会更简单一些。

Answer 2

JS里遍历那些需要添加事件的单元格,每个都加onmouseover事件.
1.标签里写onmouseover 事件
2.JS里遍历添加onmouseover 事件
除此之外不知道还有别的什么办法.

Answer 3

用jquery很简单能实现，三个步骤
1，引入jquery
2,写一个CSS类(hover)，hover是你的鼠标悬停效果，自己写吧。
3,把下面的代码拷贝到你的JS中。并将tableId替换为你的table的id。

$(document).ready(function(){
$("#tableId td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
});

Answer 4

那就放在整个table上，因为table对外是个整体，也能控制整体的颜色。