How to realize interlacing discoloration of tables by JS

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