第一种: expression
代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
.tablestyle{
background-color:#CCCCCC; border:#ff0000 solid 2px; border-collapse:collapse; cursor:hand; width:100%;
}
.tablestyle td{ border:#ff0000 solid 2px; border-collapse:collapse;}
.tablestyle tr{
onmouseover:expression(onmouseover=function()
{
this.style.color='red';
this.style.backgroundColor='yellow'
});
onmouseout:expression(onmouseout=function()
{
this.style.col
this.style.backgroundColor=''
}
);
}
</style>
<title>无标题文档</title>
</head>
<body>
<table class="tablestyle" width="0" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>11111111111</td>
<td>22222222222</td>
</tr>
<tr>
<td>33333333333</td>
<td>44444444</td>
</tr>
<tr>
<td>55555</td>
<td>66666666</td>
</tr>
<tr>
<td>77777777777</td>
<td>8888888888</td>
</tr>
</table>
</body>
</html>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－
简单的隔行变色：
<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的话……可以无视了
分享到：
相关推荐
本主题涉及的是使用jQuery实现的一种常见的用户界面优化技巧——"表格隔行变色"以及"鼠标滑过时竖直表格内容变色效果"。这种效果可以提升表格的可读性，使得数据更加清晰易辨。 首先，我们来讨论“表格隔行变色”。...
通过jquery给经过的表格设置css背景变色效果
在表格变色的场景中，我们将利用JavaScript事件监听和DOM操作来实现所需的功能。 1. **隔行变色**：这个功能可以使得表格看起来更加清晰，帮助用户更容易区分不同的行。我们可以使用JavaScript遍历表格的所有行，...
"表格隔行换色 鼠标移过变色"是两种常见的表格样式优化手段，它们可以使得表格内容更易于阅读，同时提升用户体验。在JavaScript（JS）的帮助下，我们可以轻松实现这些效果。 1. **隔行换色**： 隔行换色通常使用...
标题中的“jQuery鼠标移动表格变色及修改单元格值”是指使用jQuery库来实现一个功能，当鼠标在HTML表格上移动时，所经过的单元格会改变颜色，并且用户能够编辑表格中的单元格值。这个功能结合了jQuery的选择器、事件...
在网页设计中，表格（Table）是一种常见的数据...通过这种方式，你可以实现表格鼠标经过时整行变色的效果，同时保持与其他框架的兼容性。在实际应用中，可以根据需求调整颜色、动画效果等细节，以达到最佳的视觉效果。
综上所述，实现"jquery table鼠标滑过隔行变色表格样式代码"涉及到HTML表格布局、CSS样式设计、jQuery选择器与事件处理等多方面知识。通过合理运用这些技术，我们可以创建出更具有吸引力和易用性的数据展示界面。在...
总的来说，“鼠标滑过变色”是一种常见的网页交互设计技术，通过CSS的`:hover`伪类选择器实现，能够增强用户的交互体验。在实际开发中，开发者可能会结合各种开发工具和源代码来创建和优化这样的效果。
在本教程中，我们将深入探讨如何利用jQuery实现一个功能：当鼠标滑过表格时，使得行背景色发生变化，即所谓的“鼠标悬停高亮”效果。这个效果可以提升用户体验，帮助用户更清楚地识别和跟踪选中的表格行。 首先，...
本文将详细介绍如何使用JavaScript实现鼠标经过表格行变色的效果。 首先，我们需要理解HTML表格的基本结构。一个简单的表格由`<table>`元素包裹，内部包含`<tr>`（表格行）元素，每行内可以有多个`<td>`（表格数据...
在上述例子中，我们看到了如何通过自定义装饰器 `OverOutWrapper` 实现鼠标经过表格行变色的功能。这个装饰器继承自Displaytag 提供的 `TableDecorator` 类，并重写了 `addRowId()` 方法。`addRowId()` 方法通常用于...
在本案例中，我们探讨的主题是如何使用JavaScript实现一种常见的网页美化技巧——隔行变色，即当用户鼠标悬停在表格行上时，该行会改变颜色，以突出显示。这种效果常见于数据展示或列表中，可以引导用户的注意力，...
综上所述，“鼠标移动变色代码”巧妙地结合了HTML、CSS和JavaScript，实现了鼠标悬停时的动态色彩变换，增强了网页的互动性和美观度。开发者应熟悉这三种技术的基本语法和交互机制，以便在实际项目中灵活运用此类...
通过以上介绍，我们可以看到使用`expression`可以在IE浏览器中快速实现隔行变色及鼠标滑过变色的效果，但这种方法的兼容性和可维护性较差。相比之下，使用JavaScript则能更好地兼容各种浏览器，并且代码更加灵活易懂...
下面我们将详细探讨如何实现“超简单表格隔行换色+鼠标经过变色”这一功能，并兼容IE6、IE7以及Firefox。 首先，让我们从隔行换色开始。这是一种常见的CSS技巧，可以通过使用CSS伪类`:nth-child()`来实现。这个选择...
1. **表格特效**：表格特效主要是通过CSS和JavaScript来实现的，如标题所述，包括表格复选按钮的选中变色特效、表格排序、鼠标经过表格变色以及鼠标经过显示产品图片等。这些特效不仅能让表格看起来更专业，还能增强...
这样，表格就会根据配置自动应用隔行变色和鼠标滑过高亮效果。这个插件的灵活性在于，你可以通过传递不同的配置对象来定制样式类，以适应不同的设计需求。 总结来说，这个jQuery插件的核心功能包括： 1. 根据行的...
总的来说，通过jQuery实现的鼠标滑过变色功能，不仅简化了代码，还保证了在不同浏览器中的兼容性。这种方法对于初学者和专业开发者都是一个实用的技巧，可以提升网页的交互性和吸引力。如果你在理解或应用这些代码时...
通过以上步骤，我们实现了当鼠标经过表格行时，背景色变为预设颜色（如 `#ffc4c6`），鼠标移开后恢复原背景色的效果。这种简单但有效的交互设计能显著提高用户的操作体验，使得数据更易于阅读和理解。在实际开发中，...