How to realize dynamic discoloration of table by JavaScript

JavaScript how to achieve dynamic discoloration of tables, in view of this problem, this article introduces the corresponding analysis and solutions in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

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

When moving to the row of the main body of the table, which row is moved to, which row changes color, distinguishes the number of rows we select, and more clearly sees which row is selected.

Realization idea

1. Get all the rows of the table body

2. Css defines a background color class

For loop traverses, binding each row to onmouseover and onmouseout events respectively

Onmouseover (mouse over)-the background color class name defined by the assignment of the class name

Onmouseout (mouse away)-the class name assignment for this line is empty

Note: there is no need for exclusive thinking here, with exclusive thinking, the last line left by the mouse will have a color.

Code example:

Table dynamic discoloration th {background-color: pink;} .bg {background-color: green } Fruit favorite season Apple ☆ four seasons Banana ☆☆☆ four seasons grape ☆☆☆ summer durian ☆ summer Mango ☆ summer watermelon ☆ summer var tr = document.querySelector ('tbody'). QuerySelectorAll (' tr') For (var I = 0; I

< tr.length; i++) { tr[i].onmouseover = function() { /* 排他算法 for (var i = 0; i < tr.length; i++) { tr[i].className = ''; } */ this.className = 'bg'; } tr[i].onmouseout = function() { this.className = ''; } } 页面效果：

This is the answer to the question about how to realize the dynamic discoloration of the form in JavaScript. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.