使用Javascript在鼠标点击时改变表格单元格的颜色

Change the color of a table's cell on mouse click using Javascript

本文关键字：表格 改变 单元格 颜色 Javascript 鼠标 使用      更新时间：2023-09-26

我怎么能给一个单元格分配3种颜色，并在每次点击时更改它们?假设我有一个10x10的表格，默认颜色是白色，第一次点击单元格时，它变成黑色，第二次点击时，它变成灰色，第三次点击时，它又变成白色，对于每种颜色单元格也有一个值，比如:

白色:0
黑色:1
灰色:2 .

我想做一款益智游戏(确切地说是Griddler)，如果正确解决了谜题，每个单元格必须是黑色和灰色的。

这是一个工作小提琴

在window.onload(或DOM就绪，无论你喜欢):

var colors = ["white","black","gray"]//array of colors 
var reverseRef = {"white":0,"black":1,"gray":2}; 
var cells = document.getElementsByClassName("block");//block is a class name you should give your blocks
for(var i=0;i<cells.length;i++){//attach an event to all blocks
    cells[i].onclick = function(){//when you click them
        //change the background color
        //(reverseRef[this.styles.backgroundColor]+1)%3 means get the number value for the color, increase it by one, and modulus it by 3 (which means you only get values between 0 and 2
        this.style.backgroundColor=colors[(reverseRef[this.style.backgroundColor]+1)%3];
    }
}

(注意，在浏览器中onclick应该是一个使用addEventListener的事件监听器，并在旧的IE中使用attachEvent闪烁，如果你需要支持它)

相关文章：