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、代码

隔行换色

 <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
}
.hcls{
background: #ccc;
} .hcls:hover,h2:hover{
background: #999;
} </style>
</head>
<body>
<script>
for(i=0;i<10;i++){
if(i%2==0){
document.write('<h2 class="hcls">'+i+'</h2>');
}else{
document.write('<h2>'+i+'</h2>');
}
}
</script>
</body>
</html>
 
上一篇:Linux su和sudo命令的区别,并获得root权限


下一篇:Unity User Group 北京站:《Unity5.6新功能介绍以及HoloLens开发》