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

VMware configuration VMnet8 network method steps

Table of contents 1. Introduction 2. Configuratio...

Detailed tutorial on how to compile and install mysql8.0.29 in CentOS8 deployment LNMP environment

1. Prerequisites Since I have installed it severa...

Detailed explanation of routes configuration of Vue-Router

Table of contents introduce Object attributes in ...

Three Discussions on Iframe Adaptive Height Code

When building a B/S system interface, you often en...

Vue+video.js implements video playlist

This article shares the specific code of vue+vide...

Vue application example code based on axios request encapsulation

Table of contents What is axios? Axios request ty...

Have you carefully understood Tags How it is defined How to use

Preface : Today I was asked, "Have you carefu...

How to add fields and comments to a table in sql

1. Add fields: alter table table name ADD field n...

Some suggestions for HTML beginners and novices, experts can ignore them

Feelings: I am a backend developer. Sometimes when...

Vue implements fuzzy query-Mysql database data

Table of contents 1. Demand 2. Implementation 3. ...

HTML simple web form creation example introduction

<input> is used to collect user information ...

Use Grafana+Prometheus to monitor MySQL service performance

Prometheus (also called Prometheus) official webs...

Example of using #include file in html

There are two files a.htm and b.htm. In the same d...

nuxt.js multiple environment variable configuration

Table of contents 1. Introduction 2. Scenario 3. ...

Explore the truth behind the reload process in Nginx

Today's article mainly introduces the reload ...