隔行变色---简单的css js控制table隔行变色
（1）用expression
鼠标滑过变色：
<style type="text/css">
<!--
table { background-color:#000000; cursor:hand; width:100%; }
td {
onmouseover:
expression(onmouseover=function (){this.style.borderColor
='blue';this.style.color='red';this.style.backgroundColor ='yellow'});
onmouseout: expression(onmouseout=function (){this.style.borderColor='';this.style.color='';this.style.backgroundColor =''});
background-color:#ffffff;
}
-->
</style>
<table>
<tr><td>第1行</td><td>第1列</td></tr>
<tr><td>第2行</td><td>第2列</td></tr>
<tr><td>第3行</td><td>第3列</td></tr>
<tr><td>第4行</td><td>第4列</td></tr>
<tr><td>第5行</td><td>第5列</td></tr>
</table>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－
简单的隔行变色：
<style type="text/css">
<!--
tr {background-color:expression((this.sectionRowIndex%2==0)?"#E1F1F1":"#F0F0F0")}
-->
</style>
<table>
<tr><td>第1行</td><td>第1列</td></tr>
<tr><td>第2行</td><td>第2列</td></tr>
<tr><td>第3行</td><td>第3列</td></tr>
<tr><td>第4行</td><td>第4列</td></tr>
<tr><td>第5行</td><td>第5列</td></tr>
</table>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
每个单元格变色：
<style type="text/css">
<!--
tr {background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")}
td {background-color:expression((this.cellIndex%2==0)?"":((this.parentElement.sectionRowIndex%2==0)?"green":"yellow"))}
-->
</style>
<table>
<tr><td>第1行</td><td>第1列</td></tr>
<tr><td>第2行</td><td>第2列</td></tr>
<tr><td>第3行</td><td>第3列</td></tr>
<tr><td>第4行</td><td>第4列</td></tr>
<tr><td>第5行</td><td>第5列</td></tr>
</table>
－－－－－－－－－－－－－－－－－－－－－－－－
以上都用到expression，实现变得很方便，但是，经测试，在IE6（其它版本我不知道）上很正常，在firefox上无任何反应…… ，要想在firefox上也有此效果，就要用第二种方法
（2）用JS
鼠标滑过变色：
<script language="javascript">
window.onload=function showtable(){
var tablename=document.getElementById("mytable");
var li=tablename.getElementsByTagName("tr");
for (var i=0;i<=li.length;i++){
li[i].style.backgroundColor="#FFB584";
li[i].onmouseover=function(){
this.style.backgroundColor="#FFFFFF";
}
li[i].onmouseout=function(){
this.style.backgroundColor="#FFB584"
}
}
}
</script>
<table id="mytable">
<tr><td>第1行</td><td>第1列</td></tr>
<tr><td>第2行</td><td>第2列</td></tr>
<tr><td>第3行</td><td>第3列</td></tr>
<tr><td>第4行</td><td>第4列</td></tr>
<tr><td>第5行</td><td>第5列</td></tr>
</table>
－－－－－－－－－－－－－－－－－－－－－－－－
隔行变色：
<script language="javascript">
window.onload=function showtable(){
var tablename=document.getElementById("mytable");
var li=tablename.getElementsByTagName("tr");
for (var i=0;i<=li.length;i++){
if (i%2==0){
li[i].style.backgroundColor="#FFB584";
}else li[i].style.backgroundColor="#FFFFFF";
}
}
</script>
<table id="mytable">
<tr><td>第1行</td><td>第1列</td></tr>
<tr><td>第2行</td><td>第2列</td></tr>
<tr><td>第3行</td><td>第3列</td></tr>
<tr><td>第4行</td><td>第4列</td></tr>
<tr><td>第5行</td><td>第5列</td></tr>
</table>
－－－－－－－－－－－－－－－－－－－－－－－－
以上都要用到JS，还需要table有个id，可以对指定的table操作，但是，假如遇到某人的firefox装了NoScript的话……可以无视了
－－－－－－－－－－－－－－－－－－－－－－－－
隔行变色的鼠标经过变色
<html>
<head>
<title>隔行变色的鼠标经过变色</title>
<style type="text/css" media="screen">
table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;}
table td {border:solid #999;border-width:0 1px 1px 0;}
.t1 {background-color:#fff;}
.t2 {background-color:#eee;}
.t3 {background-color:#ccc;}
</style>
<script type="text/javascript">
var Ptr=document.getElementsByTagName("tr");
function recolor() {
for (i=1;i<Ptr.length+1;i++) {
Ptr[i-1].className = (i%2>0)?"t1":"t2";
}
}
window.onload=recolor;
for(var i=0;i<Ptr.length;i++) {
Ptr[i].onmouseover=function(){
this.tmpClass=this.className;
this.className = "t3";
};
Ptr[i].onmouseout=function(){
this.className=this.tmpClass;
};
}
</script>
</head>
<body>
<table width=400 align=center>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
</table>
</body>
</html>
－－－－－－－－－－－－－－－－－－－－－－－－
表格隔行换色+鼠标点击变色
<html>
<head>
<title>表格隔行换色+鼠标点击变色</title>
<style type="text/css"><!--
#senfe {
width: 300px;
border-top: #000 1px solid;
border-left: #000 1px solid;
}
#senfe td {
border-right: #000 1px solid;
border-bottom: #000 1px solid;
}
--></style>
<script language="javascript"><!--
function senfe(o,a,b,c,d){
var t=document.getElementById(o).getElementsByTagName("tr");
for(var i=0;i<t.length;i++){
t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;
t[i].onclick=function(){
if(this.x!="1"){
this.x="1";//本来打算直接用背景色判断，FF获取到的背景是RGB值，不好判断
this.style.backgroundColor=d;
}else{
this.x="0";
this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
}
}
t[i].onmouseover=function(){
if(this.x!="1")this.style.backgroundColor=c;
}
t[i].onmouseout=function(){
if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
}
}
}
--></script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" id="senfe">
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
</table>
<script language="javascript"><!--
//senfe("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景");
senfe("senfe","#fff","#ccc","#cfc","#f00");
--></script>
</body>
</html>
－－－－－－－－－－－－－－－－－－－－－－－－
鼠标放置后变色
<html >
<head>
<title> 鼠标放置后变色 </title>
<script type="text/javascript">
<!--
//分别是奇数行默认颜色,偶数行颜色,鼠标放上时奇偶行颜色
var aBgColor = ["#FFFFFF","#f2faff","#FFFFCC","#FFFFCC"];
//从前面iHead行开始变色，直到倒数iEnd行结束
function addTableListener(o,iHead,iEnd)
{
o.style.cursor = "normal";
iHead = iHead > o.rows.length?0:iHead;
iEnd = iEnd > o.rows.length?0:iEnd;
for (var i=iHead;i<o.rows.length-iEnd ;i++ )
{
o.rows[i].onmouseover = function(){setTrBgColor(this,true)}
o.rows[i].onmouseout = function(){setTrBgColor(this,false)}
}
}
function setTrBgColor(oTr,b)
{
oTr.rowIndex
% 2 != 0 ? oTr.style.backgroundColor = b ? aBgColor[3] : aBgColor[1] :
oTr.style.backgroundColor = b ? aBgColor[2] : aBgColor[0];
}
window.onload = function(){addTableListener(document.getElementById("tbColor"),0,0);}
//-->
</script>
</head>
<body>
<table border="1" width="100%" id="tbColor">
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
</table>
隔行变色---简单的css js控制table隔行变色的更多相关文章
- 简单的css js控制table隔行变色
(1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...
- js控制表格隔行变色
只是加载时候隔行变一个颜色,鼠标滑动上去时候没有变化 <table width="800" border="0" cellpadding="0& ...
- js 控制 table style css
var table = objj.getElementsByTagName('table'); alert(table[i].width); if(table==null) return; for(v ...
- JS控制TABLE表格在任意一行下面添加一行（有待完善）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css+js 控制幻灯片效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 伪元素after,before，css/js控制样式
CSS<style> body { font: 200%/1.45 charter; } ref::before { content: '\00A7'; letter-spacing: . ...
- CSS 控制table 滑动及调整列宽等问题总结
一. 通过css控制table y方向上滚动 html中没有滚动条,可以根据overflow属性的scroll来对table显示不完全的内容进行滚动. 只是y方向上滚动,很简单,只要设置div的hei ...
- [css或js控制图片自适应]
[css或js控制图片自适应]图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?此个人博客想到了一个 ...
- JS 控制CSS样式表
JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline. ...
随机推荐
- redis-单线程架构
单线程模型: redis中的数据结构并不全是简单的kv,还有list.hash等复杂的结构,这些结构很可能会进行细粒度的操作,比如在很长的列表偶棉添加一个元素,在hash当中或者删除一个对象,这样的一 ...
- android 开发 View _1_ View的子类们 和 视图坐标系图
目录: android 开发 View _2_ View的属性动画ObjectAnimator ,动画效果一览 android 开发 View _3_ View的属性动画ValueAnimator a ...
- !!!常用CSS代码块
图片排满一行.左右两端无间隙. <style type="text/css"> .img_abc{float:left;width:30%;margin-left:5% ...
- 收藏 —— 教你阅读Python开源项目
https://zhuanlan.zhihu.com/p/22275595?refer=python-cn
- 为datagrid、treegrid增加右键表头菜单，用于显示或隐藏列，注意：冻结列不在此菜单中
var createGridHeaderContextMenu = function(e, field) { e.preventDefault(); var grid = $(this);/* gri ...
- redis在windows系统下的安装和两个问题
今天首次接触redis,遇到一些问题,查了一些资料,在这里汇总整理下. redis的安装看这个:http://www.runoob.com/redis/redis-install.html. 问题1: ...
- C# dns.gethostentry()获取失败，提示不存在主机
传入参数domain有误. 如果是域名,可以解析.如果是局域ip可以解析. 如果是外网,解析不成功. 解决方法: 判断传入参数是域名还是ip,如果是域名,则使用dns.gethostentry(dom ...
- mysql数据库字段内容替换
UPDATE 表名 SET 字段名= replace(字段名, '查找内容', '替换成内容') ; UPDATE car_articles SET article_title = replace(a ...
- [leetcode]23. Merge k Sorted Lists归并k个有序链表
Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity. I ...
- time模块的使用
https://www.cnblogs.com/jimmy-share/p/10605575.html import time 一.方法汇总: time.sleep():定时函数 time.time( ...