web作业: 绘制表格,要求如下: 1. 实现斑马线的效果; 2. 当鼠标移动到某一行的时候,整行的内容都高亮突出
时间: 2024-11-20 18:38:20 浏览: 10
在Web开发中,你可以使用HTML、CSS以及JavaScript来实现这样的表格动态效果。这里是一个简单的示例:
1. **实现斑马线效果** (Zebra Stripes):
使用CSS `:nth-child`伪类可以轻松地为奇数行和偶数行设置不同的背景颜色,达到斑马线的效果。例如:
```html
<style>
table tr:nth-child(even) {
background-color: #f2f2f2; /* 偶数行背景色 */
}
table tr:nth-child(odd) {
background-color: white; /* 奇数行背景色 */
}
</style>
```
2. **鼠标悬停时高亮整行内容** (Row Highlight on Hover):
JavaScript配合CSS hover属性可以做到这一点。给每一行添加一个类名(如`.highlight`),然后当鼠标进入该行时添加这个类,离开时移除:
```javascript
<table id="myTable">
<!-- 表格内容 -->
</table>
<script>
document.getElementById("myTable").addEventListener("mouseover", function(event) {
var row = event.target.closest("tr");
if (row) {
row.classList.add("highlight");
}
});
document.getElementById("myTable").addEventListener("mouseout", function(event) {
var row = event.target.closest("tr");
if (row) {
row.classList.remove("highlight");
}
});
</script>
```
阅读全文