js鼠标点击后表格整行字体变色

基础概念

在JavaScript中，通过监听鼠标点击事件，可以改变HTML元素的样式。对于表格来说，通常是通过修改<tr>（表格行）元素的CSS样式来实现整行字体颜色的变化。

类型

静态样式：通过CSS直接设置固定的颜色。
动态样式：通过JavaScript根据用户的交互行为动态改变颜色。

应用场景

数据表格：在数据分析或展示时，突出显示用户感兴趣的行。
表单验证：在用户填写表单后，高亮显示有错误的字段所在的行。
导航菜单：在导航菜单中，突出显示当前选中的选项。

示例代码

以下是一个简单的示例，展示了如何在用户点击表格行时改变整行的字体颜色。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table Row Color Change</title>
<style>
    .highlight {
        background-color: yellow;
        color: black;
    }
</style>
</head>
<body>

<table id="myTable" border="1">
    <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>
</table>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var tableRows = document.querySelectorAll('#myTable tr');
    
    tableRows.forEach(function(row) {
        row.addEventListener('click', function() {
            // Remove highlight from all rows
            tableRows.forEach(function(r) {
                r.classList.remove('highlight');
            });
            // Add highlight to the clicked row
            this.classList.add('highlight');
        });
    });
});
</script>

</body>
</html>