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>