`

JQuery+CSS实现隔行变色以及高亮

阅读更多
table tbody tr.even td{
	background:#ADD8E6;
}
table tbody tr.odd td{
	background:#EEF5FB;
}

table tbody tr.msov td{
	background:#FFFF99;
}


$(document).ready(function () {
	$("table tbody tr:even").addClass("even");
	$("table tbody tr:odd").addClass("odd");
	
	$("table tbody tr").mouseover(function () {
		$(this).addClass("msov").mouseout(function () {
			$(this).removeClass("msov");
		});
	});
});
分享到:
评论

相关推荐

    jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码

    在这个例子中,我们将深入探讨如何使用jQuery创建一个插件,以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先,我们来看一下基本的HTML结构,这里包含了一个简单的表格,用于展示插件的效果: ```html ...

    jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例

    总结起来,通过结合CSS和jQuery,我们可以实现表格的隔行变色以及高亮当前选择行的效果,提升用户在浏览表格数据时的视觉体验。这个方法不仅适用于这个特定的示例,也可以灵活应用到其他类似的表格美化场景中。

    JQuery&CSS;&CSS;+DIV实例大全.rar

    29.jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 30.jquery实现图片可拖动展示的实例下载 31.jQuery实现拖动滚动条的缩略图排列插件下载 32.jQuery实现焦点图片Flash自动平滑渐变效果 33....

    网页里面表格隔行变色代码

    在本案例中,"网页里面表格隔行变色代码" 描述了一种实现表格隔行变色的方法,包括奇偶数行的变色以及点击变色的效果。 首先,我们来了解如何实现基础的表格隔行变色。在HTML中,`<table>`元素用于创建表格,`<tr>`...

    表格隔行变色,jquerys

    在本案例中,我们将探讨如何利用jQuery这一强大的JavaScript库来实现表格隔行变色的效果。 首先,jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。对于表格...

    jquery操作表格隔行,滑动,点击,变色

    在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及动画制作等任务。在“jquery操作表格隔行,滑动,点击,变色”这个主题中,我们将深入探讨如何使用jQuery来增强HTML表格的功能,包括...

    jQuery插件实现表格隔行换色且感应鼠标高亮行变色

    js代码: css代码: 代码如下: tr.alt td { background:#ecf6fc; /*这行将给所有的tr加上背景色*/ } tr.over td { background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/ }

    用JQuery实现表格隔行变色和突出显示当前行的代码

    标题中的“用JQuery实现表格隔行变色和突出显示当前行的代码”是指使用JavaScript库JQuery来美化HTML表格,使得表格的行交替显示不同的颜色,并且当鼠标悬停在某一行上时,该行会被高亮显示。这个功能在网页设计中...

    使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条

    在本文中,我们将讨论如何利用 Bootstrap 实现表格隔行变色、hover 变色以及在需要时显示滚动条的效果。 首先,为了实现这些功能,我们需要引入 Bootstrap 的 CSS 和 JavaScript 文件。在 HTML 文档的 `<head>` ...

    Asp.net GridView隔行变色和光棒效果2种方法实现

    然后,使用jQuery选择器和事件处理函数来实现隔行变色和光棒效果: ```javascript $(document).ready(function(){ $(".gridview tr:odd").addClass("odd"); $(".gridview tr:even").addClass("even"); $("....

    高效的表格行背景隔行变色及选定高亮的JS代码

    在本文中,我们将探讨如何使用纯JavaScript代码实现高效的表格行隔行变色和选定行的高亮效果。作者在开发一个项目时,考虑到性能和兼容性问题,选择了不使用jQuery这类库,而是采用原生JavaScript的方法来操作DOM。 ...

    基于jQuery的的一个隔行变色,鼠标移动变色的小插件

    这个教程主要介绍了一个基于jQuery的小插件,用于实现表格(table)和div元素的隔行变色以及鼠标悬停时的颜色变化效果。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画和Ajax交互,使得网页...

    jQuery实例(菜单、滚动、层隐藏等)

    "隔行变色"通常通过CSS实现,但使用jQuery可以动态改变表格行的类名,以实现动态的奇偶行颜色切换。"表格的光棒效果"可能是当鼠标悬浮在表格单元格上时,高亮显示整行或单元格。这可以通过`.mouseover()`和`.mouse...

    表头拖动效果|表格隔行换色效果|大气的表格样式|选择行底色突出显示

    此外,表格的样式还可以通过自定义背景色、边框样式以及高亮效果来增强其视觉吸引力。使用CSS(层叠样式表)可以实现这些定制,包括设置单元格、表头和表体的样式。 2. **表格隔行换色效果**:也称为交错行颜色或...

    精通JavaScript+jQuery Part1

     14.5 XML实现隔行变色的表格   第15章 CSS与Ajax的综合应用   15.1 Ajax概述   15.2 Ajax入门  15.3 Ajax实例:能够自由拖动布局区域的网页  第4部分 综合案例篇  第16章 我的博客   16.1 分析...

    精选_毕业设计_隔行换色鼠标指向表格行变色(含页面内容查找功能)、jQuery UI插件(gridster)_完整源码

    总的来说,这个毕业设计项目涵盖了前端开发中的多个重要知识点,包括CSS样式设计、JavaScript交互实现、DOM操作以及jQuery UI插件的应用。对于学习和提升前端开发技能来说,这样的实践项目非常有价值,它不仅能够...

    自己挑选的几个Jquery特效

    这个特效用于隔行变色,使表格更易于阅读。通过jQuery,可以动态地给表格的奇偶行添加不同的CSS类,从而改变背景颜色,提高视觉对比度。 7. **color-table.rar**: 可能是关于表格颜色的进一步扩展,可能是根据...

    jQuery 隔行换色 支持键盘上下键,按Enter选定值

    标题中的“jQuery 隔行换色 支持键盘上下键,按Enter选定值”描述了一个功能丰富的交互式表格实现,通过jQuery库实现了隔行变色、键盘导航以及Enter键选择行的功能。以下是这个功能的详细解释: 1. **jQuery隔行换...

Global site tag (gtag.js) - Google Analytics