eg:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格行选中变色效果</title>
<style type="text/css">
</style>
<script language="javascript">
function changeLineColor(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";
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 width="500" border="0" cellspacing="0" cellpadding="0" id="tableId">
<tr>
<td>ASP</td>
<td>2008-4-23 12:40:18</td>
<td>2008-4-23 14:50:28</td>
<td>2小时10分10秒</td>
</tr>
<tr>
<td>PHP</td>
<td>2008-4-23 12:40:18</td>
<td>2008-4-23 14:50:28</td>
<td>2小时10分10秒</td>
</tr>
<tr>
<td>JSP</td>
<td>2008-4-23 12:40:18</td>
<td>2008-4-23 14:50:28</td>
<td>2小时10分10秒</td>
</tr>
</table>
<script language="javascript">
//changeLineColor("名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景");
changeLineColor("tableId","#fff","#F5F5F5","#FFFFCC","#0066CC");
</body>
</html>
分享到：
相关推荐
在网页设计中，表格（Table）是一种常见的数据...通过这种方式，你可以实现表格鼠标经过时整行变色的效果，同时保持与其他框架的兼容性。在实际应用中，可以根据需求调整颜色、动画效果等细节，以达到最佳的视觉效果。
div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+CSS像素表格 百分比表格(用DIV+CSS)以百分比显示，可以根据窗口的大小自动调节所显示的大小！ DIV+CSS+JS静态分页程序可兼容主流浏览器（IE、FF、Opera） DIV+CSS表格...
自己编写的一个Html的Table 利用html,css实现了页面的表示，利用javaScript和jQuery实现了页面的动画效果。
基于HTML+CSS+JavaScript 制作的网页俄罗斯方块小游戏.zip 基于HTML+CSS+JavaScript 制作的网页俄罗斯方块小游戏.zip 基于HTML+CSS+JavaScript 制作的网页俄罗斯方块小游戏.zip 基于HTML+CSS+JavaScript 制作的网页...
基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript...
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
《HTML+CSS+JavaScript 网页制作案例教程》是一本深入浅出的前端开发教材，旨在帮助读者掌握网页设计的基础知识和技能。这个压缩包包含的源代码是书中各个实例的实现，提供了丰富的实践材料，使学习者能够通过实际...
html css js网页设计 基于HTML+CSS+JS开发的购物商城项目+效果展示+源码 基于HTML+CSS+JS开发的购物商城项目+效果展示+源码 基于HTML+CSS+JS开发的购物商城项目+效果展示+源码 基于HTML+CSS+JS开发的购物商城...
《HTML+CSS+JavaScript网页制作案例教程（第2版）》是一本全面涵盖网页制作基础知识与实践技巧的教材。此教学大纲旨在引导学生系统学习网页设计的核心技术，通过理论讲解和实际案例，使学习者掌握网页开发的基本流程...
- **综合应用**：利用JavaScript制作一个功能完善的日历控件。 #### 第四部分：综合应用——建立你自己的网站 **第二十三章：建立你自己的网站** - **项目规划**：确定网站的目标和内容。 - **设计布局**：使用...
HTML+CSS+JS精品网页模板，设置导航条、轮翻效果，鼠标滑动效果，自动弹窗，点击事件、链接等功能；适用于大学生期末大作业或公司网页制作。响应式网页，可以根据不同的设备屏幕大小自动调整页面布局； 支持如...
html+css+js科幻后台登录界面模板，适用于网页设计的登录页面个性化制作。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者...
《网页设计与制作项目教程（HTML+CSS+JavaScript）》是一部深入浅出的教材，旨在教授读者如何构建和设计互动式的网页。这份源代码压缩包包含的文件是教材中的实例和练习，帮助学习者通过实践来掌握这三种核心技术。...
网页设计与制作(HTML+CSS+JavaScript)，资源总大小：786.6MB，欢迎下载
【标题】"Table2CSS表格转CSS+DIV布局工具"是一款专为网页设计者打造的实用软件，旨在帮助用户将传统的HTML表格布局转换为更现代、更灵活的CSS（层叠样式表）与DIV（定义文档结构的HTML元素）布局。这种转换能够提升...
在网页设计领域，布局方式的发展经历了从表格（Table）到层（Div）+CSS的转变。"Table转div+css工具"就是专为此目的而设计的一款实用软件，它能够帮助开发者将原有的基于表格的HTML代码转换成使用Div和CSS进行布局的...
在网页设计中，CSS（Cascading Style Sheets）与HTML中的`div`元素结合使用，可以实现更加精细和灵活的布局控制，包括对表格的样式调整。标题“css+div控制表格 标签代码”表明我们将探讨如何利用CSS来改变和优化...
- **鼠标悬停效果**: 通过CSS的`:hover`伪类和JavaScript实现鼠标悬停时的文字变色、图片放大等效果。 - **表单验证**: 利用JavaScript对用户输入的数据进行验证，确保数据的有效性。例如，检查是否填写了必填项、...
- 定制交互效果：使用`:hover`、`:active`、`:focus`伪类，为鼠标悬停、点击和聚焦状态添加动态效果。 - 响应式设计：借助`@media`查询，根据屏幕尺寸调整元素的大小和布局，实现移动优先或多设备兼容。 3. ...
期末结课大作业 html+css+javascript网页设计实例 企业网站制作，资源里面有网页的HTML文件、CSS文件、JAVASCRIPT文件和网页中的图片文件，用于大学web网页课程设计参考以及相关从业人员参考学习