CSS TR 點(diǎn)擊：實現(xiàn)樣式與功能的完美結(jié)合 在網(wǎng)頁開發(fā)中，人們經(jīng)常需要使用表格來展示一些信息。而表格的基本元素就是 TR（table row），也就是表格的行。那么如何在 TR 上添加點(diǎn)擊事件，讓用戶能夠與表格進(jìn)行交互呢？這就需要使用 CSS 來實現(xiàn)了。 首先，我們需要在 HTML 代碼中為 TR 元素添加一個 ID 或 class，以便在 CSS 中調(diào)用。比如，我們?yōu)橐粋€表格中的每一行 TR 分別添加了 class：“ ```

單元格 1.1	單元格 1.2
單元格 2.1	單元格 2.2

``` 接下來，我們可以使用 CSS 為 TR 元素添加樣式。比如，我們?yōu)槊恳恍?TR 添加一個背景顏色，使得用戶在點(diǎn)擊某一行時能夠看到該行被選中的效果： `````` 上面代碼中，我們?yōu)?TR 的 class 添加了樣式，設(shè)置了每一行的背景顏色。同時，我們還添加了 :hover 和 .selected 兩個偽類，用來定義鼠標(biāo)指向和點(diǎn)擊某一行時的行為。 接下來，我們需要為 TR 元素添加點(diǎn)擊事件。這可以通過 JavaScript 來實現(xiàn)。在以下代碼中，我們?yōu)槊恳恍?TR 添加了一個點(diǎn)擊事件，當(dāng)用戶點(diǎn)擊某一行時，該行被高亮顯示，并且在控制臺輸出該行 TR 的 ID 或 class。 `````` 我們先獲取所有的 TR 元素，然后使用 forEach 遍歷每一個 TR，為其添加點(diǎn)擊事件。在事件中，我們首先移除所有已經(jīng)選擇的行的樣式，然后為當(dāng)前點(diǎn)擊的行添加樣式，最后在控制臺輸出該行元素的 ID 或 class。 通過上述代碼，我們實現(xiàn)了在 TR 元素上添加點(diǎn)擊事件的功能。用戶在點(diǎn)擊某一行時，該行被高亮顯示，同時可以通過控制臺輸出該行的相關(guān)信息。這樣，我們就實現(xiàn)了 CSS 樣式與 JavaScript 動態(tài)效果的完美結(jié)合。