javascript使用onclick事件改变选中行的颜色

在JavaScript中，你可以通过给表格的行（``元素）添加`onclick`事件监听器来改变其颜色。以下是一个简单的示例，展示了如何实现这个功能：


<!DOCTYPE html>
<html>
<head>
    <title>Change Row Color on Click</title>
    <style>
        /* 初始颜色，可以根据需要调整 */
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>

<table border="1">
    <tr onclick="changeRowColor(this)">
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
    <tr onclick="changeRowColor(this)">
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
    </tr>
    <!-- 可以继续添加更多行 -->
</table>

<script>
function changeRowColor(row) {
    // 移除其他行的highlight类（如果有）
    var rows = document.querySelectorAll('tr');
    rows.forEach(function(r) {
        r.classList.remove('highlight');
    });
    
    // 给当前点击的行添加highlight类
    row.classList.add('highlight');
}
</script>

</body>
</html>

在这个示例中，我们首先定义了一个CSS类`.highlight`，用于设置选中行的背景颜色。然后，在HTML表格中，我们给每一行（``元素）添加了一个`onclick`事件监听器，该监听器调用`changeRowColor`函数，并将当前行（`this`）作为参数传递。

在`changeRowColor`函数中，我们首先使用`document.querySelectorAll('tr')`获取表格中所有的行，并遍历它们，移除`highlight`类（如果有的话）。然后，我们给当前点击的行（通过函数参数`row`传递）添加`highlight`类，从而改变其颜色。

这样，每次点击表格中的一行时，都会触发颜色变化，同时确保只有一行是选中状态（即只有一行有背景颜色）。