Javascript操作表格隔行变色
<!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操作表格隔行变色的更多相关文章
- JavaScript 实现表格隔行变色
JavaScript 实现表格隔行变色 版权声明:未经授权,严禁分享! 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaa ...
- JavaScript实例---表格隔行变色以及移入鼠标高亮
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- 表格的一些原生js操作（隔行变色，高亮显示，添加删除，搜索）
看着网上的视频教程,虽说还是有点简单,但还是不免想记录下.这些操作包括(隔行变色,高亮显示,添加删除,搜索功能),而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几 ...
- JavaScript for循环实现表格隔行变色
本代码主要演示的是for循环, <!doctype html> <html lang="en"> <head> <meta charset ...
- jquery插件之表格隔行变色并鼠标滑过高亮显示
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...
- 用JQuery实现表格隔行变色和突出显示当前行
用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...
- 表格隔行变色_CSS实现鼠标悬停高亮
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- 表格隔行变色_jQuery控制实现鼠标悬停高亮
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- jQuery 表格隔行变色插件
jQuery提供了用于扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法. 基本的JS框架代码如下: ;(function($) { $.fn. ...
随机推荐
- 在Java中怎样把数组转换为ArrayList?
翻译自:How to Convert Array to ArrayList in Java? 本文分析了Stack Overflow上最热门的的一个问题的答案,提问者获得了很多声望点,使得他得到了在S ...
- Css调整字体间距
在span div 某些元素中有时候会用到调整字体的间距,设置方法: letter-spacing:15px;
- Visual Studio 2012 使用免费的Team Foundation Service
VS2012提供了在线的TFS服务,免费支持五人小团队,收费情况尚未确定,下面本文演示如何申请和连接在线TFS 服务器. 一.申请TFS服务 首先,打开VS2012,看看是否有团队资源管理器,如果没有 ...
- 玄机宝盒v1.6.1.1
最新版本:玄机宝盒v1.6.1.1 玄机宝盒v1.6.1.1 04-14/2016 给你的将是无与伦比的体验http://bbs.msdn5.com/thread-15-1-1.html(出处: 玄机 ...
- nignx+php-fpm环境下 phpmyadmin打开空白的原因探究
打开phpmyadmin一直是空白的,发现是js的问题,原因是pma的js/get_script_js.php读取js不完整 很容易的将问题原因想到了php的输出缓存大小上,我把php.ini里的ou ...
- Python操作列表的常用方法
下面列出列表常用的方法操作列表以及小例子: 1. Append 在列表末尾添加元素,需在列表末尾添加元素,需要注意几个点: A. append中添加的参数是作为一个整体 & ...
- 安装360后，visual studio 经常报各种莫名其妙的错误的解决方案
安装360后,visual studio 经常报各种莫名其妙的错误,每次都要查找错误的解决方案 而且网上关于这个的好少,以后只要碰到了这种情况我就记录下吧 今天碰到的情况是打开WCF服务时出现 ...
- 使用Qpython3制作老版天翼飞TP路由器拨号脚本
#幻境拨号python版 #by 1414641776 account='xxxxxx@96301' password='xxxxx' # 路由器脚本 def sendToRoute(account, ...
- Linux 挂载存储方法
申请的虚拟机因总宕机,处理完之后多分配了我100G空间,还是狠讲究的嘛,挂载方法如下: 初始磁盘挂载情况:[root@wmstest ~]# df -hFilesystem Size Used Ava ...
- UnitTest
using Bll; using Model; using Dal; using NUnit.Framework; using NUnit.Mocks; using System.ServiceMod ...