微信扫一扫打赏支持

js课程 4-11 表格如何实现隔行换色

js课程 4-11 表格如何实现隔行换色

一、总结

一句话总结：表格奇数行和偶数行判断，赋予不同的样式。

 

1、表格如何隔行换色？

表格奇数行和偶数行判断，赋予不同的样式。

21     <script>
22         for(i=0;i<10;i++){
23             if(i%2==0){
24                 document.write('<h2 class="hcls">'+i+'</h2>');
25             }else{
26                 document.write('<h2>'+i+'</h2>');
27             }
28         }
29     </script>

 

2、如何实现隔行换色的行hover时背景也改变？

不要将背景属性写成内联，写成类即可，让类hover是发生改变即可

24                 document.write('<h2 class="hcls">'+i+'</h2>');

 

10         .hcls{
11             background: #ccc;    
12         }
13 
14         .hcls:hover,h2:hover{
15             background: #999;
16         }

 

3、a=4;b=6;if(a==4 && b==5 || b==6)为真，解释为什么？

同优先级的时候，表达式是从左往右执行的，a==4 && b==5 的结果是非，然后和b==6的值为真

 

 

 

二、表格如何实现隔行换色

1、相关知识

1.运算符
2.正则表达式

运算符:
1.数学运算符
+,-,*,/,%

2.比较运算符
>,<,==,!=,>=,<=

3.逻辑运算符
&&,||,!
#&&运算符，两边都为真则为真；||运算符，一边为真则为真

 

 

2、代码

隔行换色

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10         .hcls{
11             background: #ccc;    
12         }
13 
14         .hcls:hover,h2:hover{
15             background: #999;
16         }
17 
18     </style>
19 </head>
20 <body>
21     <script>
22         for(i=0;i<10;i++){
23             if(i%2==0){
24                 document.write('<h2 class="hcls">'+i+'</h2>');
25             }else{
26                 document.write('<h2>'+i+'</h2>');
27             }
28         }
29     </script>
30 </body>
31 </html>

 

 

 
posted @ 2018-07-10 20:22  范仁义  阅读(472)  评论(0)    收藏  举报