以下是一个简单的JSP页面示例,演示了如何使用HTML和CSS实现鼠标滑过表格行的高亮显示效果。
教程步骤
1. 创建JSP文件
创建一个名为 `highlightTable.jsp` 的JSP文件。

2. 编写HTML表格
在JSP文件中编写HTML表格代码。
```html
/* 设置表格样式 */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid ddd;
padding: 8px;
text-align: left;
}
/* 鼠标滑过行时的高亮样式 */
tr:hover {
background-color: f5f5f5;
}
| 姓名 | 年龄 | 职业 |
|---|---|---|
| 张三 | 25 | 程序员 |
| 李四 | 30 | 设计师 |
| 王五 | 28 | 产品经理 |
```
3. 保存文件
将 `highlightTable.jsp` 文件保存到服务器上的JSP目录中。
4. 部署并测试
在浏览器中输入JSP文件的URL,例如 `http://localhost:8080/your-app-context/highlightTable.jsp`,即可看到效果。
表格样式对比
| 样式 | 描述 |
|---|---|
| `table` | 设置表格宽度为100%,边框合并,表格边框样式。 |
| `th,td` | 设置表格头和单元格的边框、内边距和文本对齐方式。 |
| `tr:hover` | 设置鼠标滑过行时的背景颜色,这里使用了浅灰色背景`f5f5f5`。 |
通过以上步骤,您就可以在JSP页面中实现鼠标滑过表格行的高亮显示效果。







