In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-03-30 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/01 Report--
This article mainly shows you the "JS how to achieve interlaced table discoloration", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "JS how to achieve interlaced table discoloration" this article.
The details are as follows
Mouse events used: (1) Mouse passes through onmouseover; (2) Mouse leaves onmouseout
Core idea: when the mouse passes over the tr line, the current line will change the background color, and the background color will be removed when the mouse leaves.
Note: the first line (the line in thead) does not need to change color, what is changed is the line in tbody.
1. Get the element and get the row in tbody.
2. Register the binding event in a loop, get all the lines in the tbody, and then register all the mouse passing and leaving events.
3. All rows bind the mouse over event, and the mouse changes color after the current element (this)
4. All rows bind the mouse to leave the event, and the mouse leaves the current element (this) without color
The code is as follows:
Table interlacing color change * {margin:0;padding: 0;} table {width:500px; position:relative; margin:100px auto; border-collapse:collapse; / * merge table single border * / border:1px solid # d7d7d7;} thead tr {background-color:#ccc Height:30px;} table tr {text-align: center; height:30px;} .bg {background: # eee } sequence number front-end word basic definition length supplement 1 select Select 6- 2 target Target 6-3 input output 5 -4 button button 8-5 checkbox check box 8-/ / 1 Get all the lines in tbody var trs = document.querySelector ('tbody') .querySelectorAll (' tr') / / 2. Register the event for (var I = 0 * * I) with a loop
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.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.