Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to realize dynamic discoloration of table by JavaScript

2025-01-27 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/03 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report