zoukankan      html  css  js  c++  java
  • 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>
     
  • 相关阅读:
    trie树
    单调队列
    网络流24题——试题库问题
    费用流的简单应用
    Manacher算法
    KMP算法
    网络流之最小费用最大流
    网络流之二分图匹配【转】
    网络流之最大流
    矩阵快速幂优化菲波那切数列
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9291282.html
Copyright © 2011-2022 走看看