`
jkfzero
  • 浏览: 105125 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Jquery双色表格

阅读更多

双色表格的实现因为Jquery强大的选择器变的非常的简单。尤其是:even和:odd两个选择器。

先来个最简单的,奇数偶数行不同色。先定义一下样式。

 

.even{
	background-color:#C0C0C0;
}
.odd{
	background-color:#0f0f0f;
}

 然后初始化时候的方法。

$(document).ready(function(){
	$("tr:even").addClass("even");
});

 同理,列不同色也很好做的。

$(document).ready(function(){
	$("td:even").addClass("even");
});

 

然后就是不相同格子不同色。这个的实现原理就是奇数行选偶数列,偶数行选技术列。

$(document).ready(function(){
	$("tr:odd td:even").addClass("odd");
	$("tr:even td:odd").addClass("odd");
});
 
分享到:
评论

相关推荐

    jquery入门之双色表格

    本文将深入探讨“jquery入门之双色表格”,教你如何利用jQuery实现一个鼠标悬停时背景颜色变化的双色表格效果。 首先,我们需要理解HTML结构。在`sstable.html`文件中,通常会包含一个表格元素`<table>`,里面包含...

    jquery特效双色表格

    jquery特效双色表格 jquery特效双色表格

    jquery 双色表格实现代码

    在本例中,我们将讨论如何使用jQuery来实现一个双色表格,也就是交错着不同背景色的表格行。 首先,标题提到了“双色表格实现代码”,这表明内容将涉及到通过代码来创建一个具有交替颜色行的表格。描述中提到,之前...

    使用jQuery5分钟快速搞定双色表格的简单实例

    先看看这个使用jQuery做的双色表格的效果: 这个双色表格看上去应该觉得挺专业的,不过它用jQuery实现的确很简单。 第一步:写好css。 <style type="text/css"> th { /*表头样式*/ background:#0066FF; ...

    jQuery·双色表格

    ### jQuery 实现双色表格效果解析 #### 一、引言 在网页设计与开发过程中,为了提升用户体验,开发者常常需要对网页中的元素进行美化处理。其中,表格作为展示数据的一种常见方式,其美观程度直接影响到用户的阅读...

    jquery实现表格隔行换色和鼠标经过提示效果源码

    本篇将详细介绍如何使用jQuery实现表格隔行换色以及鼠标经过时显示提示效果。 首先,我们需要理解jQuery的基本用法。jQuery通过选择器(如`$("#id")`、`$(".class")`或`$("tag")`)找到页面中的元素,然后对这些...

    15天学会jquery(完整版).pdf

    #### 七、使用jQuery轻松创建双色表格 创建一个双色表格通常是相当繁琐的任务,涉及到CSS和JavaScript的复杂交互。然而,使用jQuery只需要短短几行代码即可实现: ```html <!DOCTYPE html> <title>15天学会...

    15天学会jQuery 初学

    - **介绍**:本节介绍如何使用jQuery快速创建双色表格。通过简单的代码实现,展示了jQuery在简化DOM操作方面的优势。 - **示例代码**: ```html <!DOCTYPE ...

    15天学会jquery

    ### 15天学会jQuery — 入门指南 ...通过这三个章节的学习,我们已经了解了jQuery的基本概念、优势以及如何使用它来优化页面加载速度和轻松创建双色表格。接下来的章节将继续深入探讨更多实用的jQuery技巧和技术。

    15天学会jQuery

    - **双色表格**:利用jQuery可以轻松创建美观的双色表格。通过CSS和jQuery结合,可以实现在不同行间自动切换背景颜色的效果,增强用户阅读体验。 #### 结论 通过《15天学会jQuery》的学习,不仅可以快速上手jQuery...

    5天学会jquery轻松完成web设计

    **双色表格实现**:使用jQuery制作双色表格也变得异常简单,仅需几行代码即可完成。通过选择器和循环逻辑,可以轻松地为表格的每一行交替添加不同的背景颜色,从而提升用户体验和视觉吸引力。 #### 八、结语:为何...

    15天学会jQuery(0-5)

    jQuery使得制作双色表格变得极其简单。在传统方法中,这可能需要大量的CSS或JavaScript代码。而在jQuery中,只需几行代码,就能轻松实现表格行交替颜色的效果,增强了用户体验。 6. **jQuery的适用场景**: ...

Global site tag (gtag.js) - Google Analytics