在不使用 id 的情況下在 Javascript 中更改表格單元格顏色

Question

我正在做一個小項目，我想在鼠標懸停在每個單元格上時更改表格單元格的背景顏色。 我可以使用 document.getElementById("cell1"); 使用單個單元格來完成此操作。 等等，但還沒有找到一種通過選擇所有 td 標簽並避免為每個單元格提供自己的 ID 來使生活更輕松的方法。 我試過 document.getElementsByTagName 但控制台返回 cell.addEventListener 不是函數。 我一定是錯誤地使用了選擇器，或者我不理解事件處理的正確用法。 我在這里發現了一個類似的問題，但它並沒有解決我想做的僅使用 javascript 的問題。

var cell = document.getElementsByTagName("td");

cell.addEventListener("mouseover", function() {
    this.style.backgroundColor="red";

cell.addEventListener("mouseout", function() {
    this.style.backgroundColor="";
})
});

Answer 1

為什么不是 CSS？ :hover偽類要簡單得多，並且可以節省代碼長度和復雜性，並且最終會更快。

td:hover{ /* insert proper selector here */
    background-color:red;
}

Answer 2

你應該迭代集合。 “Element.getElementsByTagName() 方法返回具有給定標記名稱的元素的實時 HTMLCollection。” - https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName

for(var i = 0; i < cell.length; i++){
    cell[i].addEventListener("mouseover", function() {
        this.style.backgroundColor="red";
    };
    cell[i].addEventListener("mouseout", function() {
        this.style.backgroundColor="";
    });
}

但是，更好的方法是在 css 中使用簡單的懸停規則

td:hover{
    background-color: red;
} 

Answer 3

這是一個 jQuery 解決方案

$(document).ready(function() {
    $("td").on("mouseover mouseout", function() {
        $(this).toggleClass("red");
    });
});

http://jsfiddle.net/kwagtd0d/1

您可以使用 jQuery 通過偵聽事件來添加和刪除類，但使用 css 最容易做到這一點。

td:hover

JavaScript 解決方案

var cells = document.getElementsByTagName("td");

這將返回td元素的集合。 我們現在可以遍歷這個選擇。

for(var i = 0; i < cells.length; i++){
    cells[i].addEventListener("mouseover", function() {
        this.classList.add("red");
    };
    cells[i].addEventListener("mouseout", function() {
        this.classList.remove("red");
    });
}

http://jsfiddle.net/qknjyaaw/