1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title></title>
  6.     <script type="text/javascript">
  7.         window.onload = function () {
  8.             var oTab = document.getElementById("tb1");
  9.             var oldColor = "";
  10.             /*--------------------------拓展--开始------------------------------*/
  11.             // var name = oTab.getElementsByTagName("tbody")[0].getElementsByTagName("tr")[0].getElementsByTagName("td")[1].innerHTML;
  12.             /*
  13.             表格的应用
  14.             1.获取
  15.              tBodies.tHead,tFoot,rows,cells
  16.              2.各行变色
  17.              鼠标移入亮度显示
  18.              3.添加删除一行
  19.             // alert(oTab.tBodies[0].rows[0].cells[1].innerHTML);
  20.             // alert(name);
  21.             */
  22.             /*--------------------------拓展--结束------------------------------*/
  23.  
  24.             for (var i = 0; i < oTab.tBodies[0].rows.length; i++) {
  25.  
  26.                 oTab.tBodies[0].rows[i].onmouseover = function () {
  27.                     //先把之前的颜色存入到oldColor变量中
  28.                     oldColor = this.style.background;
  29.                     this.style.background = "green";
  30.                 }
  31.                 oTab.tBodies[0].rows[i].onmouseout = function () {
  32.                     //把oldColor中之前的颜色重新加上
  33.                     this.style.background = oldColor;
  34.  
  35.                 }
  36.                 //
  37.                 if (i % 2) {
  38.                     //隔行变色
  39.                     oTab.tBodies[0].rows[i].style.background = "#CCC";
  40.                 }
  41.             }
  42.         }
  43.     </script>
  44. </head>
  45. <body>
  46.     <table id="tb1" border="1" style="width: 500px;">
  47.         <thead>
  48.             <tr>
  49.                 <td>ID</td>
  50.                 <td>姓名</td>
  51.                 <td>年龄</td>
  52.             </tr>
  53.         </thead>
  54.         <tbody>
  55.             <tr>
  56.                 <td>1</td>
  57.                 <td>Cupid</td>
  58.                 <td>66</td>
  59.             </tr>
  60.             <tr>
  61.                 <td>2</td>
  62.                 <td>Fly</td>
  63.                 <td>45</td>
  64.             </tr>
  65.             <tr>
  66.                 <td>3</td>
  67.                 <td>Sky</td>
  68.                 <td>23</td>
  69.             </tr>
  70.             <tr>
  71.                 <td>4</td>
  72.                 <td>Windy</td>
  73.                 <td>98</td>
  74.             </tr>
  75.             <tr>
  76.                 <td>5</td>
  77.                 <td>Snow</td>
  78.                 <td>09</td>
  79.             </tr>
  80.         </tbody>
  81.     </table>
  82. </body>
  83. </html>

　　

Javascript操作表格隔行变色的更多相关文章

  1. JavaScript 实现表格隔行变色

    JavaScript 实现表格隔行变色 版权声明:未经授权,严禁分享! 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaa ...

  2. JavaScript实例---表格隔行变色以及移入鼠标高亮

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

  3. 表格的一些原生js操作（隔行变色，高亮显示，添加删除，搜索）

    看着网上的视频教程,虽说还是有点简单,但还是不免想记录下.这些操作包括(隔行变色,高亮显示,添加删除,搜索功能),而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几 ...

  4. JavaScript for循环实现表格隔行变色

    本代码主要演示的是for循环, <!doctype html> <html lang="en"> <head> <meta charset ...

  5. jquery插件之表格隔行变色并鼠标滑过高亮显示

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...

  6. 用JQuery实现表格隔行变色和突出显示当前行

    用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...

  7. 表格隔行变色_CSS实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  8. 表格隔行变色_jQuery控制实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  9. jQuery 表格隔行变色插件

    jQuery提供了用于扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法. 基本的JS框架代码如下: ;(function($) { $.fn. ...

随机推荐

  1. windows下 berkerly db的安装配置（修正了关键步骤）

    这个是我从别人的博客上找来的,亲测可用,确实解决了我当时遇到的一些问题. 首先,从http://www.oracle.com/technology/global/cn/software/product ...

  2. gcc常用选项

    gcc选项:    -c         只编译,不链接成为可执行文件,编译器只是由输入的.c等源代码文件生成.o为后缀的目标文件,通常用于编译不包含主程序的子程序文件.    -std=     指 ...

  3. 解析php时间戳与日期的转换

    php中时间戳与日期的转换. 实现功能:获取某个日期的时间戳,或获取某个时间的PHP时间戳. strtotime能将任何英文文本的日期时间描述解析为Unix时间戳,我们结合mktime()或date( ...

  4. dedecms 分页样式

    <div class="dede_pages">  <ul class="pagelist">   {dede:pagelist lis ...

  5. PySide 简易教程<三>-------动手写起来

    到目前为止,已经接触的Pyside的界面元素有如下几个:QWidget.QPushButton.QLabel.本次再介绍两个tooltip和messagebox.tooltip是一个鼠标悬浮提示信息, ...

  6. unity--IOC框架资料整理

    今天在网上找了一些unity资料研究,出了好多问题,编译无法通过,经人指点总算成功编译运行,做个笔记,整理如下: 一.下载unity: 二.在项目中添加Microsoft.Practices.Unit ...

  7. （转）Android Support Percent百分比布局

    一.概述 周末游戏打得过猛,于是周天熬夜码代码,周一早上浑浑噩噩的发现 android-percent-support-lib-sample(https://github.com/JulienGeno ...

  8. hive 操作（转）

    1.命令行操作 (1)打印查询头,需要显示设置: set hive.cli.print.header=true; (2)加"--",其后的都被认为是注释,但 CLI 不解析注释.带 ...

  9. 【js】 流式布局 页面

    <!DOCTYPE html><html><head> <meta content="text/html; charset=utf-8" ...

  10. 【python】 开始第一个项目

    根据这篇文章开始上手 http://www.oschina.net/translate/the-flask-mega-tutorial-part-i-hello-world 再加点东西 如果你的环境是 ...