Javascript 为表中的每个td添加唯一的事件侦听器

该代码的目的是使每个块在鼠标悬停时显示不同的文本。我想再添加30个块，但我似乎找不到一种方法来做到这一点，而不必为每个块创建不同的事件侦听器。使用数组和循环的mouseover和mouseout的单个事件侦听器可以做到这一点吗？
这就是Javascript和HTML代码的外观

var org=[“安娜”、“鲍勃”、“卡罗琳”]
变量变化=[“一”、“二”、“三”]
var headone=document.querySelector（“#a”）；
headone.addEventListener（'mouseover'，function（）{
headone.textContent=change[0]；
})
addEventListener（“mouseout”，function（））{
headone.textContent=org[0]；
})
var headtwo=document.querySelector（“#b”）；
head2.addEventListener（'mouseover'，function（）{
headtwo.textContent=更改[1]；
})
head2.addEventListener（“mouseout”，function（））{
headtwo.textContent=org[1]；
})
var headthree=document.querySelector（“#c”）；
headthree.addEventListener（'mouseover'，function（）{
headthree.textContent=变更[2]；
})
headthree.addEventListener（“mouseout”，function（））{
headthree.textContent=org[2]；
})

答复
桌子{
宽度：80%；
}
运输署{
宽度：20%；
位置：相对位置；
盒影：0 4px 8px 2px rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
背景色：白色；
}
运输署：在{
内容：''；
显示：块；
利润率最高：100%；
}
td:悬停{
背景颜色：粉红色；
盒影：0px 4px 24px 5px rgba（129120255,1）；
}
身体{
背景颜色：浅蓝色；
}
安娜
上下快速移动
卡罗琳

您可以使用一种索引，其中每个元素的id将确定其组织和更改值。请看下面的代码：

var org = ["Anna", "Bob", "Caroline"],
    change = ["One", "Two", "Three"];

var test = document.querySelectorAll('td');

// Loop to set id's and add eventlisteners 
for(let i = 0; i < test.length; i++){
    test[i].id = i;
    test[i].addEventListener('mouseover', () => {
        test[i].textContent = change[i];
    });
    test[i].addEventListener('mouseout', () => {
        test[i].textContent = org[i];
    });
}

var org=[“安娜”、“鲍勃”、“卡罗琳”]，
变化=[“一”、“二”、“三”]；
var测试=document.querySelectorAll（'td'）；
//循环以设置id并添加eventlisteners
for（设i=0；i{
测试[i].textContent=change[i]；
});
测试[i]。addEventListener（'mouseout'，（）=>{
test[i].textContent=org[i]；
});
}

这段代码的工作方式我认为是你想要的

---

但是，此代码段基于它们在代码中的放置顺序。当您使用它时，您将看到：）

您可以编写一个函数，添加两个事件侦听器。然后我会抓取表行并迭代它的子项。每次迭代都会运行函数，该函数会添加事件侦听器

function addEventListeners(target, index) {
    target.addEventListener('mouseover', function() {
        target.textContent = change[index];
    });
    target.addEventListener("mouseout", function() {
        target.textContent = org[index];
    });
}

var trChilds = document.querySelector('tr').children;
for (let index = 0; index < trChilds.length; index++) {
    const element = trChilds[index];
    addEventListeners(element, index);
}

函数addEventListeners（目标，索引）{
target.addEventListener（'mouseover'，function（）{
target.textContent=更改[索引]；
});
addEventListener（“mouseout”，function（））{
target.textContent=org[index]；
});
}
var trChilds=document.querySelector（'tr'）.childs；
for（让index=0；index

您可以将

类添加到
td
元素中，然后使用
document.queryselectoral（）
返回该类中所有元素的数组

然后，您可以使用
forEach（）
方法将更改一次应用于所有更改。您只需确保您的
change
数组的元素数量与您在页面上呈现的
td
元素数量相同


var org=[“安娜”、“鲍勃”、“卡罗琳”]
变量变化=[“一”、“二”、“三”]
const refs=document.queryselectoral（“.box”）；
参考文献forEach（（参考文献，i）=>{
ref.addEventListener（“鼠标悬停”，（）=>{
ref.textContent=更改[i]
})
ref.addEventListener（“mouseout”，（）=>{
ref.textContent=org[i]；
})
})

答复
桌子{
宽度：80%；
}
运输署{
宽度：20%；
位置：相对位置；
盒影：0 4px 8px 2px rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
背景色：白色；
}
运输署：在{
内容：''；
显示：块；
利润率最高：100%；
}
td:悬停{
背景颜色：粉红色；
盒影：0px 4px 24px 5px rgba（129120255,1）；
}
身体{
背景颜色：浅蓝色；
}
安娜
上下快速移动
卡罗琳
哦，哇！非常感谢，在过去的两天里，我一直在努力想办法做到这一点。
give all td class of tds and then write the following code.


let tabs=document.querySelectorAll(".tds");
let i=0;
tabs.forEach(e=>{
    e.addEventListener('mouseover',function(){
        e.textContent=change[i];
    })
    e.addEventListener('mouseout',function(){
        e.textContent=org[i];
    })
    i++
})