<!--
google_ad_client = "pub-4490194096475053";
/* 内容页,300x250,第一屏 */
google_ad_slot = "3685991503";
google_ad_width = 300;
google_ad_height = 250;
// -->
meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta content="all" name="robots" />
<meta name="author" content="盛飞, SenFe" />
<meta name="Copyright" content="" />
<meta name="description" content="" />
<meta content="" name="keywords" />
<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>
分享到：
相关推荐
下面我们将详细探讨如何实现“超简单表格隔行换色+鼠标经过变色”这一功能，并兼容IE6、IE7以及Firefox。 首先，让我们从隔行换色开始。这是一种常见的CSS技巧，可以通过使用CSS伪类`:nth-child()`来实现。这个选择...
总的来说，"表格隔行换色 鼠标移过变色"是提升网页表格用户体验的常见技巧，结合JavaScript，我们可以创建出更加动态和交互性强的表格。在实际开发中，可以根据需求进一步定制，如添加选中行高亮、全选/全取消功能等...
/** * * @author 翟正强 广东中山中南中南T25班 * @version1.0 * @2009-09-08 * @表格渲染(悬浮变色,隔行换色,点击变色) */
本教程将详细讲解如何实现表格的隔行换色以及点击整行变色的效果，这两种技术可以提升用户体验，使表格内容更加清晰易读。 首先，让我们讨论表格隔行换色。这种效果通常被称为“斑马线”效果，因为它使得交替的行...
以上代码展示了如何使用JavaScript实现表格的隔行变色、鼠标滑过变色和点击选中变色特效。在实际应用中，你需要将`yourTableId`替换为你表格的实际ID。在提供的压缩包文件中，可能包含了示例代码和相关的HTML文件，...
CSS+JS 实现表格隔行变色 鼠标移动变色
在本案例中，"网页里面表格隔行变色代码" 描述了一种实现表格隔行变色的方法，包括奇偶数行的变色以及点击变色的效果。 首先，我们来了解如何实现基础的表格隔行变色。在HTML中，`<table>`元素用于创建表格，`<tr>`...
本主题涉及的是使用jQuery实现的一种常见的用户界面优化技巧——"表格隔行变色"以及"鼠标滑过时竖直表格内容变色效果"。这种效果可以提升表格的可读性，使得数据更加清晰易辨。 首先，我们来讨论“表格隔行变色”。...
- 在编程环境中，如Python的pandas库，可以通过自定义样式来实现类似的效果，通过设置DataFrame的背景色实现隔行变色。 综上所述，“表格颜色自动隔行变色”是提高数据呈现效果的一种实用技巧，无论是手动设置还是...
鼠标移动表格行上行变色的JS脚本,鼠标移动表格行上行变色的JS脚本,
3. **点击变色**：当用户点击表格的某一行时，可以改变该行的背景色以提供视觉反馈。我们可以通过监听`click`事件来实现： ```javascript $("table tbody tr").click(function() { $(this).toggleClass(...
JS代码 JS网页内容模块选用 Photoshop 扩展动作 TAB带动画 隔行同色 层固定在右下角的离奇方法 超简单表格隔行换色+鼠标经过变色 打开关闭层JS 弹出菜单 顶部自动收缩滑动门广告代码 动画效果打开层 关闭层 固定位置...
通过以上介绍，我们可以看到使用`expression`可以在IE浏览器中快速实现隔行变色及鼠标滑过变色的效果，但这种方法的兼容性和可维护性较差。相比之下，使用JavaScript则能更好地兼容各种浏览器，并且代码更加灵活易懂...
JavaScript表格隔行变色是一种常见的前端视觉效果，通过为表格中的行设置不同的背景颜色，使得用户浏览时能够更加容易地分辨不同的行。这种效果通常用于增强用户的阅读体验。 #### 知识点2：原生JavaScript实现方法...
通过以上技术的结合，我们可以创建一个具有隔行变色和鼠标悬停高亮效果的动态时间表格，使用户在查看和交互时有更好的体验。在实际项目中，还要考虑到性能优化、兼容性问题以及可能的用户自定义需求。
### JavaScript表格隔行变色及鼠标交互效果实现 在网页设计与开发中，为了提升用户体验，经常需要对表格中的数据进行美化处理。其中一项常用的技术就是实现表格的隔行变色以及鼠标移入移出、点击等交互效果。本文将...
"可编辑的表格，实现隔行换色等效果"是一个典型的功能实现，通常用于数据展示，使表格更加易读，提升视觉效果。这个功能的实现通常涉及到HTML、CSS和JavaScript技术，特别是jQuery库的运用。 首先，HTML是网页的...
在网页的表格或者列表中，通过隔行换色可以清晰地区分每一行数据，提高用户的阅读体验。jQuery可以方便地实现这一功能。通常，我们会选择所有的偶数行或奇数行，然后改变它们的背景颜色。例如，使用CSS类来定义不同...