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>
 

js课程 4-11 表格如何实现隔行换色的更多相关文章

  1. table隔行换色

    以前做表格隔行换色,是在tr上添加不同的背景色,但在程序开发的过程需要做判断,不够方便,而且生成的代码也比较多,现在的需求逐渐修改为JQ去控制简洁的表格去显示隔行换色 <script type= ...

  2. 利用JS动态生成隔行换色HTML表格

    用JS生成动态生成表格,行.列由用户输入,并使表格隔行换色 方法一. 代码: <!DOCTYPE html> 2 <html> 3 <head> 4 <tit ...

  3. JS应用实例4：表格隔行换色

    HTML代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  4. JS实现自定义工具类，隔行换色、复选框全选、隔行高亮等

    很多功能都可以放在js的工具类中,在使用的时候直接调用 本次实现的功能包括: /** 0.当点击表的整行的任意位置时,第一列的复选框或者单选框均选中  1.隔行换色 2.复选框的全选效果 3.实现表格 ...

  5. JQuery案例一：实现表格隔行换色

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. Bootstrap3基础 table-striped 表格实现隔行换色（浅灰色与白色交替）

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  7. jQuery应用实例2：表格隔行换色

    这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: ...

  8. jQuery学习(四)——使用JQ完成表格隔行换色

    1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css( ...

  9. JavaScript学习——表格的隔行换色+高亮显示

    1.案例一:我们希望在后台页面中实现一个隔行换色的效果显示所有的用户信息,显示效果如下: 1)新标签 <thead> //表头 <tr> <th></th&g ...

随机推荐

  1. 【Android】各式各样的弹出框与对菜单键、返回键的监听

    Android自带各式各样的弹出框.弹出框也是安卓主要的组件之中的一个.同一时候安卓程序能够对菜单键.返回键的监听.但在安卓4.0之后就禁止对Home键的屏蔽与监听,强制保留为系统守护按键.假设非要对 ...

  2. js对数组进行操作

    1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限, ...

  3. Linux下几种另类创建文件之方法

    以前我们用编辑器例如vi来新建文件,下面介绍几种另类生成文件的方法,多用在备份和测试上. 创建文件的方法: 1.echo 命令    #echo "set bell"  >& ...

  4. 为root账户更名

    为root账户更名 处于安全考虑许多管理员想把root更名,具体方法如下: 1.先以root登陆系统 2.用vi 编辑/etc/passwd文件,将第一行的第一个root修改为你想要的账户名,然后保存 ...

  5. go 可以开发桌面应用

    go 可以开发桌面应用 go 可以开发桌面应用,但并不是很舒适.可以使用的GUI库有:1.goqt,LiteIDE作者出品,Go和QT的绑定,还未发布2.go.uik,纯Go实现的并发UI工具3.wa ...

  6. Oracle定义变量、常量

    1 定义变量 declare var_countryname varchar2(50):='中国'; 2 定义常量 con_day constant integer:=365;

  7. HDU 1716 排列2

    排列2 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  8. nginx配置静态文件服务器的一个特殊需求的探索和分享, nginx处理不同路径返回统一文件,nginx改写,跳转请求.

    最近在做一个前后端分离的个人博客,在做自己博客的时候有个想法,本来是打算用nginx作为静态文件服务器使用,django做后端程序. 我的前端页面用vue写的,结果用组件用嗨了,发现页面列表和 详情都 ...

  9. 使用C库制作DLL

    一.用C编写制作 DLL 如下图所示,是在C++的基础上新建的项目工程: 新建项目的工程文件中有.cpp文件. 由于我们是用C库制作的DLL,显然用C++来编写的是不合适的,我为什么用C库,而不用C+ ...

  10. 【Android个人理解（八）】跨应用调用不同组件的方法

    如果情景: 创建两个应用appA和appB,appA包括一个Service,此Service有一个堵塞方法每隔10秒钟产生一个随机数字,例如以下: public int getRandomInt(){ ...