js怎么实现点哪行哪行变色

在JavaScript中实现点击某一行使其变色，可以通过添加点击事件监听器来实现。具体步骤包括：选择要操作的行元素、为每个行元素添加点击事件监听器、在点击事件中改变行的背景颜色。

以下是详细的实现方法：

选择行元素：使用document.querySelectorAll选择所有行元素。
添加点击事件监听器：使用forEach遍历所有行元素，并为每个行元素添加一个点击事件监听器。
改变行的背景颜色：在点击事件处理函数中，改变行元素的背景颜色。

下面的代码演示了如何实现这一功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change Row Color on Click</title>
    <style>
        table {
            width: 50%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        .selected {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1, Cell 1</td>
                <td>Row 1, Cell 2</td>
            </tr>
            <tr>
                <td>Row 2, Cell 1</td>
                <td>Row 2, Cell 2</td>
            </tr>
            <tr>
                <td>Row 3, Cell 1</td>
                <td>Row 3, Cell 2</td>
            </tr>
        </tbody>
    </table>
    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            const rows = document.querySelectorAll('tbody tr');
            rows.forEach(row => {
                row.addEventListener('click', () => {
                    // Remove 'selected' class from all rows
                    rows.forEach(r => r.classList.remove('selected'));
                    // Add 'selected' class to the clicked row
                    row.classList.add('selected');
                });
            });
        });
    </script>
</body>
</html>

详细描述：

选择行元素

使用document.querySelectorAll('tbody tr')选择所有位于<tbody>内的行元素。这样确保只对表体的行进行操作，而不会影响表头。

添加点击事件监听器

使用forEach遍历所有选中的行元素，并为每个行元素添加一个点击事件监听器。这样可以确保每一行在被点击时都会触发事件处理函数。

改变行的背景颜色

在点击事件处理函数中，首先使用forEach遍历所有行元素，并移除它们的selected类。这样可以确保只有当前点击的行会被高亮显示。
然后为当前点击的行元素添加selected类，通过改变CSS样式来实现背景颜色的改变。

通过这种方式，可以实现一个简单的交互效果，使用户在点击表格行时能够直观地看到选中的行。

js怎么实现点哪行 哪行变色

相关问答FAQs：

js怎么实现点哪行哪行变色