html表格悬停回调|极客教程

html表格悬停回调

一、介绍

在网页开发中，表格是一种常用的展示数据的方式。当表格内容较多时，为了提升用户体验，我们可能需要添加一些交互效果。本文将介绍如何使用HTML、CSS和JavaScript来实现表格悬停回调功能，即在用户悬停在表格某行时，该行变色或显示额外信息。

二、实现步骤

1. HTML结构

首先，我们需要在HTML中创建一个表格，并为表格的每一行添加一个唯一的类名，以便在CSS和JavaScript中进行操作。以下是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML表格悬停回调</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <table>
        <tr class="row1">
            <td>1</td>
            <td>Apple</td>
            <td>Red</td>
        </tr>
        <tr class="row2">
            <td>2</td>
            <td>Banana</td>
            <td>Yellow</td>
        </tr>
        <tr class="row3">
            <td>3</td>
            <td>Orange</td>
            <td>Orange</td>
        </tr>
    </table>

    <script src="script.js"></script>
</body>

</html>

2. CSS样式

接下来，我们可以使用CSS为表格添加一些样式，例如设置行高、背景颜色等。在这里，我们主要需要设置鼠标悬停时行的样式。以下是一个简单的CSS代码示例：

table {
    width: 100%;
    border-collapse: collapse;
}

td {
    padding: 8px;
    border: 1px solid #ddd;
}

tr:hover {
    background-color: #f5f5f5;
    cursor: pointer;
}

3. JavaScript交互

最后，我们使用JavaScript来实现表格悬停时的效果。当用户悬停在某行时，我们可以改变该行的背景颜色或显示额外的信息。以下是一个简单的JavaScript代码示例：

const rows = document.querySelectorAll('tr');

rows.forEach(row => {
    row.addEventListener('mouseover', () => {
        row.style.backgroundColor = 'lightblue';
    });

    row.addEventListener('mouseout', () => {
        row.style.backgroundColor = '';
    });
});