最简单行之有效的方法:
onmouseover="this.style.backgroundColor='#f4f8fb'" onmouseout="this.style.backgroundColor='#ffffff'"
搜罗方法:
(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>
? : 问号和冒号是一起用的,叫条件运算符。
语法:
条件表达式 ? 真值 : 假值
这个表式式由三部分组成的,如果条件表达式的值为真,则整个表达式的值为“真值”的值,反之为“假值”的值。
分享到:
相关推荐
本主题涉及的是使用jQuery实现的一种常见的用户界面优化技巧——"表格隔行变色"以及"鼠标滑过时竖直表格内容变色效果"。这种效果可以提升表格的可读性,使得数据更加清晰易辨。 首先,我们来讨论“表格隔行变色”。...
"表格隔行换色 鼠标移过变色"是两种常见的表格样式优化手段,它们可以使得表格内容更易于阅读,同时提升用户体验。在JavaScript(JS)的帮助下,我们可以轻松实现这些效果。 1. **隔行换色**: 隔行换色通常使用...
### 隔行变色与鼠标滑过变色技术详解 在网页设计中,为了提升用户体验及美观性,经常会使用到隔行变色以及鼠标滑过时改变颜色的效果。这两种效果可以通过不同的技术来实现,包括使用`expression`(仅限于IE浏览器)...
这样,表格就会根据配置自动应用隔行变色和鼠标滑过高亮效果。这个插件的灵活性在于,你可以通过传递不同的配置对象来定制样式类,以适应不同的设计需求。 总结来说,这个jQuery插件的核心功能包括: 1. 根据行的...
以上代码展示了如何使用JavaScript实现表格的隔行变色、鼠标滑过变色和点击选中变色特效。在实际应用中,你需要将`yourTableId`替换为你表格的实际ID。在提供的压缩包文件中,可能包含了示例代码和相关的HTML文件,...
jQuery 与 HTML 表格(table)的结合可以实现许多实用的功能,如本例中的“鼠标滑过隔行变色”效果。这种效果能够提升用户的交互体验,使得用户在浏览数据密集型表格时更容易区分每一行。 要实现这个功能,我们需要...
此外,隔行变色和鼠标滑过时的颜色变化都是通过修改CSS样式来实现的,主要是通过JavaScript修改div元素的style属性中的backgroundColor来实现的。 4. 隔行变色效果实现: 隔行变色可以通过判断当前行数的索引,并...
这段代码在鼠标悬浮在表格行上时添加 "highlight" 类,离开时移除,实现滑过变色效果。"highlight" 类同样需要在 CSS 中定义,比如: ```css .highlight { background-color: #ffffcc; /* 或其他颜色 */ } ``` ...
7. **表格样式处理**:利用`mouseover()`, `addClass()`, `mouseout()`, `removeClass()`, `click()`, 和 `toggleClass()`等方法实现表格行的隔行变色、鼠标滑过和点击时的样式变化。`tr:even`选择器用于选取偶数行...
2. **鼠标滑过变色**:jQuery允许我们监听鼠标悬停事件(hover),并据此改变元素的样式。`$(".element").hover(function() { /* 鼠标进入时的处理 */ }, function() { /* 鼠标离开时的处理 */ })`,在函数中可以...
综合jquery实现表格隔行换色和鼠标经过提示效果源码 7)日历插件 1.jQuery简洁漂亮点阵数字时钟显示日期的插件 2.一款简单jQuery日历选择器代码 3.基于jquery实现倒计时钟插件下载,Flip-Down Clock特效效果 ...