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. Bmob移动后端云服务平台--Android从零開始--(一)何为Bmob

    Bmob移动后端云服务平台--Android从零開始--(一)何为Bmob 在正式的项目开发中,单client不能满足我们的需求,须要实现client与服务端的连接. 而在编写Android服务端代码 ...

  2. js---07 js预解析，作用域---闭包

    js解析器首先不会逐行读代码,这是第二部了. 首先 根据var找到变量,根据function找函数,找到变量var a = 1,js解析器只会读取等号前面的var a,并把a设置值未定义,并不会读取等 ...

  3. thinkphp中 Illegal offset type异常

    thinkphp中 Illegal offset type异常 一.错误提示 二.解决思路 1.看出错提示中的函数为assign函数,那说明是我们在从控制器assign数据到页面的部分出现了错误 2. ...

  4. 51.cgi网站后门

    运行截图: html开发: <html> <body> <form id="form" name="form" method=&q ...

  5. asp.net大数据导出execl实现分开压缩并下载

    asp.net大数据导出execl实现分开压缩并下载 /// <summary> /// 导出数据到EXCEL 多个表的 /// </summary> /// <para ...

  6. 网上看到的一些IT资源

    A.网站模板+logo+服务器主机+发票生成 HTML5 UP:响应式的HTML5和CSS3网站模板. Bootswatch:免费的Bootstrap主题. Templated:收集了845个免费的C ...

  7. Kinect开发 —— 基础知识

    转自:http://www.cnblogs.com/yangecnu/archive/2012/04/02/KinectSDK_Application_Fundamentals_Part2.html ...

  8. nslookup---域名查询

    nslookup命令是常用域名查询工具,就是查DNS信息用的命令. nslookup4有两种工作模式,即“交互模式”和“非交互模式”. 在“交互模式”下,用户可以向域名服务器查询各类主机.域名的信息, ...

  9. C语言编程入门——程序练习（下）

    C语言的一些简单操作练习. 互换两个数字: # include <stdio.h> int main(void) { int i = 3; int j = 5; int t;   //将i ...

  10. 2.Xml与多个对象的映射（聚合或组合）及注意事项

    在我们的实际应用中,Xml中的结构往往不止这么简单,一般都会有2,3层.也就是说如果映射成对象就是聚合(组合)的情况 . 就用我们上一章的例子继续来讲,简单我们的Book的author现在不止是一个S ...