CSS的一個重要功能是可以通過點擊單元格來改變顏色。這對于制作互動性強的網頁非常有用。

table {
border-collapse: collapse;
}
td {
width: 50px;
height: 50px;
border: 1px solid black;
text-align: center;
cursor: pointer;
}
td.clicked {
background-color: red;
}

首先，我們需要定義一個表格，并給每個單元格添加一個點擊事件。

1
2
3
4
5
6
7
8
9

在這個例子中，我們定義了一個3x3的表格，并在每個單元格上添加了一個onclick事件，這個事件會調用changeColor函數來改變單元格的顏色。

下面，我們來看一下changeColor函數的實現：

function changeColor(cell) {
cell.classList.toggle("clicked");
}

這個函數會檢查給定的單元格是否已被點擊，如果已經被點擊則會將其背景色改為紅色。如果單元格未被點擊，則會將其背景色改回白色。

最后，需要注意的一點是在CSS中，我們定義了一個名為clicked的class，用來表示單元格已被點擊。所以在changeColor函數中，我們只需要使用classList.toggle函數來切換這個class即可。