正文

如何用JavaScript实现点击表格行的高亮显示

/0 浏览量
1107

在网页开发中，为表格行添加点击高亮效果是一种常见的交互设计，它可以让用户更直观地看到哪些行已经被选中。下面，我将详细讲解如何使用JavaScript来实现这一功能。

基本思路

要实现点击表格行的高亮显示，我们可以采用以下步骤：

  1. 定义一个CSS类，用于控制高亮显示的样式。
  2. 为表格的每一行添加点击事件监听器。
  3. 在点击事件中，切换行的类，从而实现高亮效果。

代码实现

1. 定义CSS样式

首先，我们需要定义一个CSS类，用来表示高亮效果。这里，我使用了简单的背景色变化来表示高亮。

.highlight {
    background-color: #e0e0e0;
}

2. HTML结构

接下来，我们创建一个简单的表格。表格包含多行多列，以便演示。

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

3. JavaScript代码

现在，我们将编写JavaScript代码，为表格的每一行添加点击事件监听器，并在点击时切换行的类。

document.addEventListener('DOMContentLoaded', function() {
    var table = document.getElementById('myTable');
    var rows = table.getElementsByTagName('tr');

    for (var i = 0; i < rows.length; i++) {
        rows[i].addEventListener('click', function() {
            // 移除所有行的highlight类
            for (var j = 0; j < rows.length; j++) {
                rows[j].classList.remove('highlight');
            }
            // 为当前点击的行添加highlight类
            this.classList.add('highlight');
        });
    }
});

4. 完整示例

将以上HTML、CSS和JavaScript代码合并，即可得到一个完整的示例。

<!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: #e0e0e0;
        }
    </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>
        <!-- 更多行 -->
    </table>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var table = document.getElementById('myTable');
            var rows = table.getElementsByTagName('tr');

            for (var i = 0; i < rows.length; i++) {
                rows[i].addEventListener('click', function() {
                    // 移除所有行的highlight类
                    for (var j = 0; j < rows.length; j++) {
                        rows[j].classList.remove('highlight');
                    }
                    // 为当前点击的行添加highlight类
                    this.classList.add('highlight');
                });
            }
        });
    </script>
</body>
</html>

通过以上步骤，我们可以实现点击表格行的高亮显示效果。当然，这只是一个简单的示例，你可以根据自己的需求进行修改和扩展。

-- 展开阅读全文 --