| 单元格 1.1 | 单元格 1.2 |
| 单元格 2.1 | 单元格 2.2 |
首页 >
css tr 点击 |css 中的ul 标签
CSS TR 点击：实现样式与功能的完美结合
在网页开发中，人们经常需要使用表格来展示一些信息。而表格的基本元素就是 TR（table row），也就是表格的行。那么如何在 TR 上添加点击事件，让用户能够与表格进行交互呢？这就需要使用 CSS 来实现了。
首先，大家需要在 HTML 代码中为 TR 元素添加一个 ID 或 class，以便在 CSS 中调用。比如，大家为一个表格中的每一行 TR 分别添加了 class：“
“`
“`
接下来，大家可以使用 CSS 为 TR 元素添加样式。比如，大家为每一行 TR 添加一个背景颜色，使得用户在点击某一行时能够看到该行被选中的效果：
“`.row1 {
background-color: #ccc;
}
.row2 {
background-color: #eee;
}
/* 鼠标指向某一行时的样式 */
tr:hover {
background-color: yellow;
cursor: pointer;
}
/* 点击某一行时的样式 */
tr.selected {
background-color: red;
}“`
上面代码中，大家为 TR 的 class 添加了样式，设置了每一行的背景颜色。同时，大家还添加了 :hover 和 .selected 两个伪类，用来定义鼠标指向和点击某一行时的行为。
接下来，大家需要为 TR 元素添加点击事件。这可以通过 JavaScript 来实现。在以下代码中，大家为每一行 TR 添加了一个点击事件，当用户点击某一行时，该行被高亮显示，并且在控制台输出该行 TR 的 ID 或 class。
“`const trList = document.querySelectorAll(‘tr’);
trList.forEach(tr =>{
tr.addEventListener(‘click’, () =>{
// 移除所有已选择的行
trList.forEach(t =>t.classList.remove(‘selected’));
// 为该行添加选择样式
tr.classList.add(‘selected’);
// 在控制台输出该行元素的 ID 或 class
console.log(tr.id || tr.className);
});
});“`
大家先获取所有的 TR 元素，然后使用 forEach 遍历每一个 TR，为其添加点击事件。在事件中，大家首先移除所有已经选择的行的样式，然后为当前点击的行添加样式，最后在控制台输出该行元素的 ID 或 class。
通过上述代码，大家实现了在 TR 元素上添加点击事件的功能。用户在点击某一行时，该行被高亮显示，同时可以通过控制台输出该行的相关信息。这样，大家就实现了 CSS 样式与 JavaScript 动态效果的完美结合。