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

Linux system (Centos6.5 and above) installation jdk tutorial analysis

JavaScript to achieve dynamic color change of table

Linux system (Centos6.5 and above) installation jdk tutorial analysis

Detailed tutorial on installing Python 3.6.6 from scratch on CentOS 7.5

Briefly understand the MYSQL database optimization stage

An example of the calculation function calc in CSS in website layout

Implementation of Vue single file component

Tips for viewing text in Linux (super practical!)

MySQL time types and modes details

Detailed explanation of several ways to remove the gap between inline-block elements in CSS

How to implement Nginx reverse proxy for multiple servers

Detailed installation and configuration tutorial of MySQL 5.7 under Win10

Recommend

Analysis of MySQL latency issues and data flushing strategy process

ftp remotely connect to Linux via SSH

Full process record of Nginx reverse proxy configuration

Explanation of Truncate Table usage

React mouse multi-selection function configuration method

Understanding MySQL clustered indexes and how clustered indexes grow

MySQL password is correct but cannot log in locally -1045

How to configure MySQL master-slave synchronization in Ubuntu 16.04

Detailed explanation of docker nginx container startup and mounting to local

Building command line applications with JavaScript

Ubuntu20's tzselect setting time failure problem, Raspberry Pi server (recommended)

Solution to Ubuntu 18.04 not being able to connect to the network in VMware virtual machine

CSS3 solution to the problem of freezing on mobile devices (animation performance optimization)

Implementation of Docker packaging image and configuration modification

Detailed discussion of MySQL stored procedures and stored functions