JS实现简洁(隔行换色、高亮显示)表格特效


以下是一个使用JavaScript实现隔行换色和高亮显示表格行(假设当鼠标悬停在行上时高亮)的简洁示例。这个示例使用了纯JavaScript和CSS,不需要任何外部库。

首先,是HTML部分,一个简单的表格:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格特效</title>
<style>
    .highlight {
        background-color: yellow; /* 高亮颜色 */
    }
    .odd {
        background-color: #f0f0f0; /* 隔行换色(奇数行) */
    }
</style>
</head>
<body>

<table id="myTable">
    <tr><td>行 1, 列 1</td><td>行 1, 列 2</td></tr>
    <tr><td>行 2, 列 1</td><td>行 2, 列 2</td></tr>
    <tr><td>行 3, 列 1</td><td>行 3, 列 2</td></tr>
    <!-- 更多行... -->
</table>

<script>
// JavaScript 代码将在这里
</script>

</body>
</html>

接下来是JavaScript部分,添加在`

在这个示例中,我们首先通过CSS定义了两种样式:`.highlight`用于高亮显示,`.odd`用于隔行换色。然后,我们使用JavaScript遍历表格的每一行,为奇数行添加`.odd`类以实现隔行换色。接着,我们为每个行元素添加`mouseover`和`mouseout`事件监听器,以在鼠标悬停时添加`.highlight`类,并在鼠标移出时移除它,从而实现高亮效果。

请注意,这只是一个基本的示例,您可以根据需要调整CSS样式和JavaScript逻辑来满足更复杂的需求。