`
izuoyan
  • 浏览: 9373700 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jQuery:表格的奇偶行变色

 
阅读更多

<html>
<head>
<title>表格变色</title>
<style type="text/css">
.odd{background:#ffffee;}
.even{background:#fff38f;}
.first{background:red;}
.last{background:blue;}
.mouseOver{background:green;}
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("tr:odd").addClass("odd"); //加奇行样式
$("tr:even").addClass("even"); //加偶行样式
$("tr:first").addClass("first"); //为第一行加样式
$("tr:last").addClass("last"); //为最后行加样式
//为行元素加上鼠标移入和移出事件
$("tr").mouseover(function() {
$(this).addClass("mouseOver") //加上样式
}).mouseout(function() {
$(this).removeClass("mouseOver")//去掉样式
});
})
</script>
</head>
<body>
<table border="1">
<tr><td>姓名</td><td>年龄</td></tr>
<tr><td>王华</td><td>18</td></tr>
<tr><td>刘云</td><td>19</td></tr>
<tr><td>刘亮</td><td>15</td></tr>
<tr><td>叶子</td><td>17</td></tr>
<tr><td>刘梦</td><td>20</td></tr>
</table>
</body>
</html>

分享到：
| jQuery提交表单, 无刷新
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery表格隔行变色鼠标滑过竖直表格内容变色效果

    1. 为表格的每个`&lt;tr&gt;`元素添加一个自定义类，例如`even`或`odd`，这可以通过循环遍历表格行并根据奇偶性动态添加。 2. 在CSS中定义这两个类的背景颜色，如`.even { background-color: #F5F5F5; }` 和 `.odd { ...

    jQuery轻松实现表格的隔行变色和点击行变色的实例代码

    总结来说，本文提供的实例代码不仅清晰地演示了如何用jQuery实现表格的隔行变色和点击行变色，而且强调了jQuery在网页交互设计中的实用性和有效性。通过编写简单的jQuery脚本，可以极大地增强网页的功能和用户的交互...

    jquery实现的超帅动态表格交叉变色高亮显示效果.zip

    本项目“jquery实现的超帅动态表格交叉变色高亮显示效果.zip”显然关注的是如何利用jQuery来增强网页中的表格展示，特别是涉及到动态数据更新时的视觉效果。 首先，我们要理解jQuery如何处理表格（`&lt;table&gt;`）元素...

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

    1. 根据行的索引（奇偶性）动态添加样式类，实现表格隔行变色。 2. 监听鼠标事件，动态修改行的样式，实现鼠标滑过时的高亮显示效果。 通过这种方式，开发者可以轻松地增强表格的视觉效果，提高用户的交互体验。...

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

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

    关于表格（table）中checkbox等相关事件操作（动态添加行+隔行换色等相关）（jquery）

    在jQuery中，可以通过遍历表格的行（tr）并根据行的索引（奇偶性）来设置不同的背景颜色。例如： ```javascript $("table tbody tr:even").css("background-color", "#F5F5F5"); $("table tbody tr:odd").css(...

    jquery实现表格隔行换色效果

    要实现表格隔行换色的效果，最常见的方式是利用jQuery的`:odd`和`:even`选择器来选取奇偶行，然后通过`.addClass()`方法为这些行添加特定的CSS类，从而改变它们的背景颜色。 #### 1. 创建项目和引入jQuery库 首先...

    jQuery 表格隔行变色代码[修正注释版]

    虽然这个部分未完全展示，但我们可以推测其基本思路是通过遍历表格中的每一行，并根据行号的奇偶性来设置不同的背景颜色。这种方法虽然不如jQuery简洁，但在某些不支持jQuery或需要更精细控制的情况下仍非常有用。 ...

    jQuery操作表格（table）的常用方法、技巧汇总

    1. 鼠标移动行变色： 这个功能可以通过`.hover()`事件来实现。当鼠标悬停在表格行上时，给该行的单元格添加一个类，离开时移除这个类。两种方法的代码如描述所示，主要通过`addClass()`和`removeClass()`方法。 2....

    详解jQuery简单的表格应用

    在此应用场景中，可以为表格的奇偶行定义不同的背景色，创建隔行变色的效果。具体操作是使用jQuery选择器选中奇偶行，并添加相应的类名，从而应用预定义的CSS样式。此外，还可以通过单选框或复选框来控制表格行的...

    jQuery和css3响应式斑马线表格美化插件

    在斑马线表格美化方面，CSS3可以轻松实现隔行变色的效果，通过伪类`:nth-child(odd)`或`:nth-child(even)`来选择奇偶行并应用不同的背景颜色，达到视觉上的区分。此外，CSS3的媒体查询（Media Queries）使得设计可以...

    jQuery简单实例.zip

    1. **表格奇偶行变色**： 表格是网页中常见的数据展示形式，通过jQuery可以方便地实现奇偶行颜色变换，增强可读性。这通常通过遍历表格的每一行，利用`:even`和`:odd`选择器来分别设置偶数行和奇数行的背景色。例如...

    自己挑选的几个Jquery特效

    通过jQuery，可以动态地给表格的奇偶行添加不同的CSS类，从而改变背景颜色，提高视觉对比度。 7. **color-table.rar**： 可能是关于表格颜色的进一步扩展，可能是根据数据内容改变单元格的颜色，或者为表格提供更...

    JQ 隔行变色

    标题“JQ 隔行变色”指的是使用jQuery（简称JQ）库来实现HTML表格或其他列表元素的隔行变色效果。这种效果常见于数据展示，通过交替颜色增加可读性和视觉吸引力。让我们深入了解一下如何实现这个功能以及相关的...

    jQuery表格(Table)基本操作实例分析

    2. **表格奇偶行变色**： 为了区分奇数行和偶数行，可以使用`:odd`和`:even`选择器。为这两个选择器定义不同的背景色CSS类，然后在文档加载完成后应用这些类。 ```javascript .odd { background-color: #bbf; ...

    jQuery隔行变色与普通JS写法的对比

    在使用JavaScript实现隔行变色的时候，通常需要利用JavaScript的for循环来遍历表格的所有行，然后利用行索引的奇偶性来判断是哪一行。比如，当索引值为奇数时，即为隔行的行，然后通过更改其class的方式来改变背景色...

    CSS+JS实现table隔行变色

    例如，使用jQuery库，我们可以监听表格的`DOMSubtreeModified`事件，一旦表格内容变化，就重新应用隔行变色： ```javascript $(document).ready(function() { $('.zebra-stripes').on('DOMSubtreeModified', ...

    jQuery操作Table技巧大汇总

    1. 鼠标移动行变色：jQuery的`hover()`函数用于在鼠标进入和离开时执行不同的操作。例如，当鼠标悬停在表格行上时，可以通过添加`hover`类来改变行内单元格的颜色，反之则移除该类以恢复原色。 2. 奇偶行不同颜色：...

Magicbox
Global site tag (gtag.js) - Google Analytics