<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function () {
var oTab = document.getElementById("tb1");
var oldColor = "";
/*--------------------------拓展--开始------------------------------*/
// var name = oTab.getElementsByTagName("tbody")[0].getElementsByTagName("tr")[0].getElementsByTagName("td")[1].innerHTML;
/*
表格的应用
1.获取
tBodies.tHead,tFoot,rows,cells
2.各行变色
鼠标移入亮度显示
3.添加删除一行
// alert(oTab.tBodies[0].rows[0].cells[1].innerHTML);
// alert(name);
*/
/*--------------------------拓展--结束------------------------------*/ for (var i = 0; i < oTab.tBodies[0].rows.length; i++) { oTab.tBodies[0].rows[i].onmouseover = function () {
//先把之前的颜色存入到oldColor变量中
oldColor = this.style.background;
this.style.background = "green";
}
oTab.tBodies[0].rows[i].onmouseout = function () {
//把oldColor中之前的颜色重新加上
this.style.background = oldColor; }
//
if (i % 2) {
//隔行变色
oTab.tBodies[0].rows[i].style.background = "#CCC";
}
}
}
</script>
</head>
<body>
<table id="tb1" border="1" style="width: 500px;">
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Cupid</td>
<td>66</td>
</tr>
<tr>
<td>2</td>
<td>Fly</td>
<td>45</td>
</tr>
<tr>
<td>3</td>
<td>Sky</td>
<td>23</td>
</tr>
<tr>
<td>4</td>
<td>Windy</td>
<td>98</td>
</tr>
<tr>
<td>5</td>
<td>Snow</td>
<td>09</td>
</tr>
</tbody>
</table>
</body>
</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. HDU 1954 Subway tree systems (树的最小表示法)

    题意:用一个字符串表示树,0代表向下走,1代表往回走,求两棵树是否同构. 分析:同构的树经过最小表示会转化成两个相等的串. 方法:递归寻找每一棵子树,将根节点相同的子树的字符串按字典序排列,递归回去即 ...

  2. template_12特化与重载

    1,重载函数模板f<int*>((int*)pi);//1f<int>((int*)pi);//2上面用int*替换第一个模板的T,用int来替换第二个模板的T.那么将得到两个 ...

  3. 【Newtonsoft.Json】Window Phone Json解析开发包

    WP从服务器.API交换数据一般都是用JSON格式字符串. 下面介绍用Newtonsoft.Json来处理JSON. 准备 1.到 http://json.codeplex.com/ 下载Newton ...

  4. cadence16.3破解方法

    今天安装cadence16.3,安装了两遍都失败了,百思不得其解,结果总是出现在license上,如下图所示: 后面当然就只能启动demo版了,于是网上找,参照以前古老的法子,终于解决问题! 首先,开 ...

  5. ExtJS实战 01——HelloWorld

    前言 Extjs5的发布已经有些日子了,目前的最新稳定版本是Extjs5.1.0,我们可以在官方网站进行下载.不过笔者今天访问得到的是502Bad Gateway,原因可能是sencha的nigix没 ...

  6. 12个git实战建议和技巧

    摘要:git无疑是现在最热门的版本控制工具,而且正在进一步侵占SVN以及CVS的市场.本文作者从国外技术问答社区Stack Overflow整理的12个很实用的git使用技巧和建议,希望对你有帮助. ...

  7. js根据IP取得天气

    <span id="weather"></span> <script> function weather(cityName) { var cha ...

  8. ros-Qt代码环境的搭建

    1 建立package catkin_create_pkg beginner_tutorials roscpp 2 导入Qt Qt中打开整个工作空间的src/CMakeLists.txt 在倒数第二行 ...

  9. 1099. Build A Binary Search Tree (30)

    A Binary Search Tree (BST) is recursively defined as a binary tree which has the following propertie ...

  10. SQLite数据库的加密【转】

    1.创建空的SQLite数据库. //数据库名的后缀你可以直接指定,甚至没有后缀都可以 //方法一:创建一个空sqlite数据库,用IO的方式 FileStream fs = File.Create( ...