JavaScript to achieve dynamic color change of table

JavaScript to achieve dynamic color change of table

This article shares the specific code for JavaScript to achieve dynamic color change of the table for your reference. The specific content is as follows

The table is divided into two parts: the header and the body of the table.

When you move to a row in the table body, the row you move to changes color to distinguish the number of rows you have selected, making it easier to see which row is selected.

Implementation ideas

1. Get all rows of the table body
2. CSS defines a background color class
For loop traverses and binds onmouseover and onmouseout events to each row.
onmouseover (mouse over) - - - The class name of this row is assigned the defined background color class name
onmouseout (mouse leaves) - - - The class name of this row is assigned an empty value

Note: No exclusive thinking is needed here. If exclusive thinking is used, the last line that the mouse leaves will have color.

Code example:

<!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>Dynamic color change of table</title>
    <style>
        th {
            background-color: pink;
        }
        
        .bg {
            background-color: green;
        }
    </style>
</head>

<body>
    <table border="1" cellpadding="8" cellspacing="0" align="center">
        <thead>
            <tr>
                <th>Fruit</th>
                <th>Like level</th>
                <th>Season</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Apple</td>
                <td>☆☆☆☆☆</td>
                <td>Four Seasons</td>
            </tr>
            <tr>
                <td>Banana</td>
                <td>☆☆☆</td>
                <td>Four Seasons</td>
            </tr>
            <tr>
                <td>Grapes</td>
                <td>☆☆☆</td>
                <td>Summer</td>
            </tr>
            <tr>
                <td>Durian</td>
                <td>☆☆☆☆☆☆☆☆</td>
                <td>Summer</td>
            </tr>
            <tr>
                <td>Mango</td>
                <td>☆☆☆☆☆☆☆☆</td>
                <td>Summer</td>
            </tr>
            <tr>
                <td>Watermelon</td>
                <td>☆☆☆☆☆</td>
                <td>Summer</td>
            </tr>
        </tbody>
    </table>
    <script>
        var tr = document.querySelector('tbody').querySelectorAll('tr');
        for (var i = 0; i < tr.length; i++) {
            tr[i].onmouseover = function() {
                /* Exclusive algorithm for (var i = 0; i < tr.length; i++) {
                    tr[i].className = '';
                } */
                this.className = 'bg';
            }
            tr[i].onmouseout = function() {
                this.className = '';
            }
        }
    </script>
</body>

</html>

Page effect:

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:
  • Detailed explanation of how to implement dynamic tables in JavaScript
  • Detailed explanation of dynamically generated tables using javascript
  • JavaScript to achieve dynamic table effect
  • JavaScript to implement a simple dynamic table
  • JavaScript to dynamically generate tables on web pages
  • Example of dynamically generating a table with JavaScript
  • Detailed explanation of how to generate dynamic tables and dynamic effects using JavaScript

<<:  Detailed example of MySQL joint table update data

>>:  How to view nginx configuration file path and resource file path

Recommend

Understanding MySQL Locking Based on Update SQL Statements

Preface MySQL database lock is an important means...

CSS layout tutorial: How to achieve vertical centering

Preface I have been summarizing my front-end know...

MySQL Basics Quick Start Knowledge Summary (with Mind Map)

Table of contents Preface 1. Basic knowledge of d...

Detailed explanation of the difference between JavaScript spread operator and rest operator

Table of contents What is the rest operator? How ...

Simple CSS text animation effect

Achieve results Implementation Code html <div ...

HTML embedded in WMP compatible with Chrome and IE detailed introduction

In fact, there are many corresponding writing met...

A brief analysis of understanding Vue components from an object-oriented perspective

When the same function and HTML code are used mul...

Using js to achieve the effect of carousel

Today, let's talk about how to use js to achi...

Advanced crawler - Use of Scrapy_splash component for JS automatic rendering

Table of contents 1. What is scrapy_splash? 2. Th...

Perfect solution to mysql cannot start after phpstudy is installed (no need to delete the original database, no need to change any configuration, no need to change the port) direct coexistence

Today, when learning PHP, of course, you have to ...

Express implements login verification

This article example shares the specific code for...

How to clear the cache after using keep-alive in vue

What is keepalive? In normal development, some co...

Sample code for realizing book page turning effect using css3

Key Takeaways: 1. Mastering CSS3 3D animation 2. ...

Detailed installation process of MySQL5.6.40 under CentOS7 64

MySQL5.6.40 installation process under CentOS7 64...

Vue implements the magnifying glass function of the product details page

This article shares the specific code of Vue to i...