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

Workerman writes the example code of mysql connection pool

Recommend

AsyncHooks asynchronous life cycle in Node8

Async Hooks is a new feature of Node8. It provide...

Vue.js manages the encapsulation of background table components

Table of contents Problem Analysis Why encapsulat...

MYSQL5.6.33 database master/slave (Master/Slave) synchronization installation and configuration details (Master-Linux Slave-windows7)

1. Installation environment Here is also a record...

JavaScript to achieve dynamic color change of table

Workerman writes the example code of mysql connection pool

Specific use of Mysql prepare preprocessing

Use of Vue3 table component

Vue3 navigation bar component encapsulation implementation method

How to delete node_modules and reinstall

HTML table markup tutorial (41): width and height attributes of the table header WIDTH, HEIGHT

JavaScript design pattern learning proxy pattern

Detailed explanation of Vue configuration request multiple server solutions

Delegating Privileges in Linux Using Sudo

Navicat for MySQL 11 Registration Code\Activation Code Summary

Recommend

AsyncHooks asynchronous life cycle in Node8

Vue.js manages the encapsulation of background table components

MYSQL5.6.33 database master/slave (Master/Slave) synchronization installation and configuration details (Master-Linux Slave-windows7)

JavaScript implements the protocol example in which the user must check the box

Example method of deploying react project on nginx

Independent implementation of nginx container configuration file

Example of horizontal and vertical centering of div sub-element using CSS

Centos6.9 installation Mysql5.7.18 step record

The rel attribute of the HTML link tag

Summary of techniques for implementing complex page layout using frameset

Detailed explanation of commands to view linux files

Complete step record of vue encapsulation TabBar component

The meaning and usage of linux cd

Methods for backing up Windows server files locally, Windows server data backup solutions

Solution to the problem that Linux cannot connect to the Internet in VMware after the computer shuts down unexpectedly