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>