本文实例为大家分享了JavaScript实现鼠标经过表格行给出颜色标识,供大家参考,具体内容如下
代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
<!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 >Document</ title > < style > * { margin: 0; padding: 0; } table { margin: 100px auto; width: 800px; border-spacing: 0; text-align: center; } table tr:nth-child(1) { background-color: rgb(135, 206, 235); } table tr:nth-child(n+2) { border-bottom: 1px solid black; } th { font-size: 14px; padding-top: 5px; padding-bottom: 5px; } td { font-size: 12px; padding-top: 8px; padding-bottom: 8px; color: blue; border-bottom: 1px solid lightgray; } </ style > </ head > < body > < table > < tr > < th >代码</ th > < th >名称</ th > < th >最新公布净值</ th > < th >累计净值</ th > < th >前单位净值</ th > < th >净值增长率</ th > </ tr > < tr > < td >003526</ td > < td >农银金穗3个月定期开放债券</ td > < td >1.075</ td > < td >1.079</ td > < td >1.074</ td > < td >+0.047%</ td > </ tr > < tr > < td >003526</ td > < td >农银金穗3个月定期开放债券</ td > < td >1.075</ td > < td >1.079</ td > < td >1.074</ td > < td >+0.047%</ td > </ tr > < tr > < td >003526</ td > < td >农银金穗3个月定期开放债券</ td > < td >1.075</ td > < td >1.079</ td > < td >1.074</ td > < td >+0.047%</ td > </ tr > < tr > < td >003526</ td > < td >农银金穗3个月定期开放债券</ td > < td >1.075</ td > < td >1.079</ td > < td >1.074</ td > < td >+0.047%</ td > </ tr > < tr > < td >003526</ td > < td >农银金穗3个月定期开放债券</ td > < td >1.075</ td > < td >1.079</ td > < td >1.074</ td > < td >+0.047%</ td > </ tr > < tr > < td >003526</ td > < td >农银金穗3个月定期开放债券</ td > < td >1.075</ td > < td >1.079</ td > < td >1.074</ td > < td >+0.047%</ td > </ tr > </ table > < script > var rows = document.querySelectorAll(' table tr:nth-child(n+2)'); for (var i = 0; i < rows.length ; i++) { rows[i] .onmouseover = function () { this.style.backgroundColor = "lightblue" ; } rows[i] .onmouseout = function () { this.style.backgroundColor = "" ; } } </script> </ body > </ html > |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/KathyLJQ/article/details/115570940