1、案例一：我们希望在后台页面中实现一个隔行换色的效果显示所有的用户信息，显示效果如下：

1）新标签

 <thead>                  //表头

         <tr>

             <th></th>

 　　　　</tr>

 </thead>

 <tbody>                  //表格内容

         <tr>

             <td></td>

 9　　　　  </tr>

 </tbody>

2)步骤分析

第一步：确定事件(onload)并为其绑定一个函数

第二步：书写函数(获取表格)

第三步：获取tbody里面的行数(长度rows.length)

第四步：对tbody里面的行进行遍历

第五步：获取奇数行和偶数行(角标对2取余)

第六步：分别对奇数行和偶数行设置背景颜色(.style.backgroundColor)

3)代码实现（window.onload设置隐名函数）

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>表格隔行换色</title>

         <script>

             window.onload=function(){

                 //1.获取表格

                 var tblEle=document.getElementById("tbl");

                 //2.获取表格中tbody里面的行数（长度）这里的0指的是第一个tbody

                 var len=tblEle.tBodies[0].rows.length;

                 //3.对tbody里面的行进行遍历

                 for(var i=0;i<len;i++){

                     if(i%2==0){

                         //4.对偶数行设置背景颜色

                         tblEle.tBodies[0].rows[i].style.background="pink";

                     }else{

                         //5.对奇数行设置背景颜色

                         tblEle.tBodies[0].rows[i].style.background="gold";

                     }

                 }

             }

         </script>

     </head>

     <body>

         <table border="1px" width="500px" height="50px" align="center" id="tbl">

             <thead>

                 <tr align="center">

                     <td>编号</td>

                     <td>姓名</td>

                     <td>年龄</td>

                 </tr>

             </thead>

             <tbody>

                 <tr>

                     <td>1</td>

                     <td>张三</td>

                     <td>22</td>

                 </tr>

                 <tr>

                     <td>2</td>

                     <td>李四</td>

                     <td>25</td>

                 </tr>

                 <tr>

                     <td>3</td>

                     <td>王五</td>

                     <td>27</td>

                 </tr>

                 <tr>

                     <td>4</td>

                     <td>赵六</td>

                     <td>29</td>

                 </tr>

                 <tr>

                     <td>5</td>

                     <td>田七</td>

                     <td>30</td>

                 </tr>

                 <tr>

                     <td>6</td>

                     <td>汾九</td>

                     <td>20</td>

                 </tr>

             </tbody>

         </table>

     </body>

 </html>

在谷歌浏览器内运行，得到需求中的效果。

2、案例二：实现一个表格的高亮显示

1）JS事件

onmouseover()鼠标移入事件。鼠标从外部移入到当前元素时触发。

onmouseout()鼠标移出事件。鼠标从当前元素移出时触发。

2）步骤分析：

第一步：确定事件(onmouseover和onmouseout)并分别为其绑定一个函数

第二步：获取鼠标移上去的那行，对其设置背景颜色

3）代码实现：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>表格高亮显示</title>

         <script>

             function changeColor(id,flag){

                 if(flag=="over"){

                     document.getElementById(id).style.background="pink";

                 }else if(flag=="out"){

                     document.getElementById(id).style.background="white";

                 }

             }

         </script>

     </head>

     <body>

         <table border="1px" width="500px" height="50px" align="center" id="tbl">

             <thead>

                 <tr align="center">

                     <td>编号</td>

                     <td>姓名</td>

                     <td>年龄</td>

                 </tr>

             </thead>

             <tbody>

                 <tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">

                     <td>1</td>

                     <td>张三</td>

                     <td>22</td>

                 </tr>

                 <tr onmouseover="changeColor('tr2','over')" id="tr2" onmouseout="changeColor('tr2','out')">

                     <td>2</td>

                     <td>李四</td>

                     <td>25</td>

                 </tr>

                 <tr onmouseover="changeColor('tr3','over')" id="tr3" onmouseout="changeColor('tr3','out')">

                     <td>3</td>

                     <td>王五</td>

                     <td>27</td>

                 </tr>

                 <tr onmouseover="changeColor('tr4','over')" id="tr4" onmouseout="changeColor('tr4','out')">

                     <td>4</td>

                     <td>赵六</td>

                     <td>29</td>

                 </tr>

                 <tr onmouseover="changeColor('tr5','over')" id="tr5" onmouseout="changeColor('tr5','out')">

                     <td>5</td>

                     <td>田七</td>

                     <td>30</td>

                 </tr>

                 <tr onmouseover="changeColor('tr6','over')" id="tr6" onmouseout="changeColor('tr6','out')">

                     <td>6</td>

                     <td>汾九</td>

                     <td>20</td>

                 </tr>

             </tbody>

         </table>

     </body>

 </html>

在谷歌浏览器内运行，实现的效果就是光标移动到某一行，这一行就变成粉色，移开就显示白色。

　　　　

JavaScript学习——表格的隔行换色+高亮显示的更多相关文章

  1. jQuery_完成表格的隔行换色

    表格的颜色一样不利于区分,而利用jQuery则可以很方便的进行表格的隔行换色操作,原表如下: 这样看着很不方便,但是隔行换色之后非常便捷清楚. 代码如下: <!DOCTYPE html> ...

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

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

  3. 使用JS创建表格以及隔行换色（包括隔N行换色）

    <html> <head> <title></title> <style> table{ width:800px; border-colla ...

  4. JS案例四：表格的隔行换色以及高亮显示

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

  5. 模块：jquery实现表格的隔行换色

    效果图: 知识点精讲:jquery中$("tr:odd")和$("tr:even")选择器分别代表奇数行和偶数行,并且索引是从0开始,即第一行为偶数: 代码实现 ...

  6. Angular 学习笔记——ng-repeat 隔行换色

    <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...

  7. js课程 4-11 表格如何实现隔行换色

    js课程 4-11 表格如何实现隔行换色 一.总结 一句话总结:表格奇数行和偶数行判断,赋予不同的样式. 1.表格如何隔行换色? 表格奇数行和偶数行判断,赋予不同的样式. 21 <script& ...

  8. javascript 表格隔行换色

    用到的知识点: 获取表格元素 tbody 和 rows都是有索引的 这里我们只有一组tbody所以 索引是0 偶数行 索引取余2为0 奇数行 索引取余2不为0 通过 遍历行索引设置相应的颜色. < ...

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

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

随机推荐

  1. POJ 1155 树形DP

    题意:电视台发送信号给很多用户,每个用户有愿意出的钱,电视台经过的路线都有一定费用,求电视台不损失的情况下最多给多少用户发送信号. 转自:http://www.cnblogs.com/andre050 ...

  2. redis模拟消息订阅

    使用办法: 订阅端: Subscribe 频道名称 发布端: publish 频道名称 发布内容 客户端例子: redis 127.0.0.1:6379> subscribe news Read ...

  3. SpringBoot(六) SpirngBoot与Mysql关系型数据库

    pom.xml文件的配置 <dependency> <groupId>org.springframework.boot</groupId> <artifact ...

  4. Android dex ，xml 文件反编译方法

    Dex 文件是Android上运行于delvik的java二进制文件,如果你对其中的内容感兴趣而开发人员没有公布源代码,你可以用如下方法反编译dex文件: 1 解压system.img 用xyaffs ...

  5. Book 动态规划

    虽然之前学过一点点,但是还是不会------现在好好跟着白书1.4节学一下—————— (1)数字三角形 d(i,j) = max(d(i+1,j),d(i+1,j+1)) + a[i][j] hdu ...

  6. 《Exception》第八次团队作业：Alpha冲刺（大结局）

    一.项目基本介绍 项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 Exception 作业学习目标 1.掌握软件测试基础技术.2.学习迭代式增量软 ...

  7. [NOIP补坑计划]NOIP2015 题解&做题心得

    感觉从15年开始noip就变难了?(虽然自己都做出来了……) 场上预计得分:100+100+60~100+100+100+100=560~600(省一分数线365) 题解: D1T1 神奇的幻方 题面 ...

  8. Kendo UI diagram 更改connnect线颜色，及shapes的属性值

    1.改diagram中连线的颜色:redraw一下就OK // Change the Line Green diagram.connections[indexS].redraw({ stroke:{ ...

  9. Linux系统串口接收数据编

    http://blog.csdn.net/bg2bkk/article/details/8668576 之前基于IBM deveplopworks社区的代码,做了串口初始化和发送的程序,今天在此基础上 ...

  10. 20130910.Windows上安装和配置MongoDB

    官方文档:http://docs.mongodb.org/manual/tutorial/ 1.下载软件 http://www.mongodb.org/downloads 2.解压 解压后进入bin目 ...