JavaScript implements color identification when the mouse passes over the table row

JavaScript implements color identification when the mouse passes over the table row

This article shares with you how to use JavaScript to give color labels when the mouse passes over a table row. The specific content is as follows

Code:

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        table {
            margin: 100px auto;
            width: 800px;
            border-spacing: 0;
            text-align: center;
        }
        
        table tr:nth-child(1) {
            background-color: rgb(135, 206, 235);
        }
        
        table tr:nth-child(n+2) {
            border-bottom: 1px solid black;
        }
        
        th {
            font-size: 14px;
            padding-top: 5px;
            padding-bottom: 5px;
        }
        
        td {
            font-size: 12px;
            padding-top: 8px;
            padding-bottom: 8px;
            color: blue;
            border-bottom: 1px solid lightgray;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>Code</th>
            <th>Name</th>
            <th>Latest published net worth</th>
            <th>Accumulated net value</th>
            <th>Previous unit net value</th>
            <th>Net asset growth rate</th>
        </tr>
        <tr>
            <td>003526</td>
            <td>Agricultural Bank of China Jinsui 3-month regular open bond</td>
            <td>1.075</td>
            <td>1.079</td>
            <td>1.074</td>
            +0.047%
        </tr>
        <tr>
            <td>003526</td>
            <td>Agricultural Bank of China Jinsui 3-month regular open bond</td>
            <td>1.075</td>
            <td>1.079</td>
            <td>1.074</td>
            +0.047%
        </tr>
        <tr>
            <td>003526</td>
            <td>Agricultural Bank of China Jinsui 3-month regular open bond</td>
            <td>1.075</td>
            <td>1.079</td>
            <td>1.074</td>
            +0.047%
        </tr>
        <tr>
            <td>003526</td>
            <td>Agricultural Bank of China Jinsui 3-month regular open bond</td>
            <td>1.075</td>
            <td>1.079</td>
            <td>1.074</td>
            +0.047%
        </tr>
        <tr>
            <td>003526</td>
            <td>Agricultural Bank of China Jinsui 3-month regular open bond</td>
            <td>1.075</td>
            <td>1.079</td>
            <td>1.074</td>
            +0.047%
        </tr>
        <tr>
            <td>003526</td>
            <td>Agricultural Bank of China Jinsui 3-month regular open bond</td>
            <td>1.075</td>
            <td>1.079</td>
            <td>1.074</td>
            +0.047%
        </tr>


    </table>

    <script>
        var rows = document.querySelectorAll(' table tr:nth-child(n+2)');
        for (var i = 0; i < rows.length; i++) {
            rows[i].onmouseover = function() {
                this.style.backgroundColor = "lightblue";
            }
            rows[i].onmouseout = function() {
                this.style.backgroundColor = "";
            }
        }
    </script>
</body>

</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • js method to change the color of table rows when the mouse passes over them
  • Playing sound when the mouse passes over in Javascript

<<:  Solve the problem of MYSQL connection port being occupied and introducing file path errors

>>:  How to build a standardized vmware image for kubernetes under rancher

Recommend

How to deploy a simple c/c++ program using docker

1. First, create a hello-world.cpp file The progr...

How to use watch listeners in Vue2 and Vue3

watch : listen for data changes (change events of...

Linux uses shell scripts to regularly delete historical log files

1. Tools directory file structure [root@www tools...

Learn v-model and its modifiers in one article

Table of contents Preface Modifiers of v-model: l...

Implementation of CSS border length control function

In the past, when I needed the border length to b...

Detailed explanation of Xshell common problems and related configurations

This article introduces common problems of Xshell...

A brief analysis of the use of zero copy technology in Linux

This article discusses several major zero-copy te...

WiFi Development | Introduction to WiFi Wireless Technology

Table of contents Introduction to WiFi Wireless T...

Solution to the problem that Docker cannot stop or delete container services

Preface Today, a developer gave me feedback that ...

How to deal with garbled characters in Mysql database

In MySQL, database garbled characters can general...

Detailed explanation of this pointing problem in JavaScript function

this keyword Which object calls the function, and...