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