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>
     
  • 相关阅读:
    基于Oracle的Mybatis 批量插入
    java.lang.ClassCastException: com.sun.proxy.$Proxy32 cannot be cast to com.bkc.bpmp.core.cache.MemcachedManager
    理解 Mybatis的分页插件 PageHelper
    手机注册获取验证码的PHP代码
    php分页代码简单实现
    PHP简单漂亮的分页类
    PHP实现各种经典算法
    Vue 入门指南 JS
    php 经典的算法题你懂的
    WebService 之 WSDL文件 讲解
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9291282.html
Copyright © 2011-2022 走看看