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. java实现简单回文算法

    算法要求 编写一个程序,判断一个字符串是否为"回文".回文串:字符串字符从前往后与从后往前一致(中心对称). 算法思路 首先将字符串等分左右两块,然后依次对称比较每一对字符是否相同 ...

  2. const,var,let 区别

    js中const,var,let区别 1.const定义的变量不可以修改,而且必须初始化. 声明的是常量 1 const b = 2;//正确 2 // const b;//错误,必须初始化 3 co ...

  3. 关于Java中equal函数和==的一些区别

    equal函数比较的到底是什么,很明显是比较的值,但是什么值?与==比较的堆中的内存地址不同,其比较的是对象的值,包括各个属性的值.我们在重新overriding此方法时首先要判断是否为同一对象,如果 ...

  4. DirectUI界面编程（六）实现右键弹出菜单

    本节向大家介绍一下右键弹出菜单是如何实现的.效果如下,在窗口中点击鼠标右键弹出菜单,点击菜单项能够响应菜单点击事件. 使用Duilib库实现的弹出菜单,实际上也是一个Windows窗口,因此我们需要创 ...

  5. struts2中各个jar包的具体作用

    -----------------------------------struts2的核心包-------------------------------------- struts2-core-2. ...

  6. HDU 1257 最少拦截系统【最长上升子序列】

    解题思路:可以转化为求最长上升子序列来做,还是可以用an与按升序排列后的an求LCS来做,为防止超时,用滚动数组优化一下就可以了. 最少拦截系统 Time Limit: 2000/1000 MS (J ...

  7. LeetCode（15）3Sum

    题目如下: Python代码: def threeSum(self, nums): res = [] nums.sort() for i in xrange(len(nums)-2): if i &g ...

  8. python简单的购物系统

    #coding = utf-8 #2016-11-19#我的工资是存在文件中的,执行后会判断是否存过工资,如果存过无需输入,直接购物,没存过需要输入工资#wages.txt是存工资的文件 import ...

  9. Jetty初探

    一.在jetty中部署web应用 Jetty 和 Tomcat 一样都是一个web server的container, 用户可以在里面 deploy 自己的 war 包,然后启动 Jetty, 进而通 ...

  10. event 下鼠标坐标的获取

    event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event.pageX ...