`

使用jQuery使HTML中的table奇偶行变色

 
阅读更多

 

 

使用jQuery实现,奇偶行变色的小例子:

 

以下是部分HTML代码:

<table id="t" border="1" cellspacing="0px" cellpadding="0px" align="center" width="100%">
    <tr  style="color:yellow;background-color:blue">
      <th>请选择</th>
       <th>用户编号</th>
       <th>用户姓名</th>
       <th>用户性别</th>
       <th>用户年龄</th>
       <th>所属部门</th>
       <th>执行修改</th>
       <th>查看详细</th>
    </tr>
    
    <logic:iterate id="emp" name="MapUsers" property="UserList">
     <tr>
      <td align="center"><input type="checkbox" name="chk" value="${emp.userid }" onclick="get_onclick(this)"></td>
      <td align="center">${emp.userid }</td>
       <td align="center">${emp.username }</td>
       <td align="center">${emp.sex }</td>
       <td align="center">${emp.age }</td>
       <td align="center">${emp.dept.dname }</td>
       <td align="center"><A href="#">修改</A></td>
       <td align="center"><A href="#">详细信息</A></td>
     </tr>
    </logic:iterate>
  </table>

 

 

javascript代码:

//奇数行换颜色;
		onload = function(){
			jQuery("#t>tbody>tr:odd").css("backgroundColor","LightCyan");
		}

 

分享到:
评论

相关推荐

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

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

    CSS+JS实现table隔行变色

    当表格内容变化时,遍历所有可见的行,根据索引的奇偶性添加`even-row`或`odd-row`类,这两个类在CSS中定义了相应的背景颜色。 当然,如果你不希望依赖jQuery,原生JavaScript同样可以实现类似的功能,只是代码会...

    jQuery操作Table技巧大汇总

    jQuery操作Table技巧大汇总主要涵盖了如何使用jQuery对HTML表格进行一系列的交互和样式修改,包括鼠标响应、样式调整、行和列的隐藏与删除,以及单元格内容的获取与设置等。以下是对这些技巧的详细解释: 1. 鼠标...

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

    1. **选择器**:使用jQuery选择器选取表格的行和单元格,例如`$('table tbody tr')`选取表格体内的所有行。 2. **循环处理**:遍历每一行,对奇偶行应用不同的CSS类,以便设置不同的背景色。这可以通过`$.each()`...

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

    在HTML中,表格由`&lt;table&gt;`标签开始,`&lt;tr&gt;`标签定义每一行,`&lt;td&gt;`或`&lt;th&gt;`标签定义单元格。为了实现隔行变色,我们可以利用jQuery的选择器和CSS样式来完成。一般步骤如下: 1. 为表格的每个`&lt;tr&gt;`元素添加一个...

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

    在HTML中,`&lt;table&gt;`元素用于创建表格,`&lt;tr&gt;`表示表格行,`&lt;td&gt;`表示表格单元格。我们可以为`&lt;tr&gt;`添加类名,然后在CSS中针对这些类名定义不同的背景颜色。例如: ```html &lt;table&gt; 数据1 数据2 数据3 ...

    JS自定义的漂漂亮样式的Table

    在CSS中,我们可以使用`:nth-child(odd)`和`:nth-child(even)`伪类来选择奇偶行并应用不同的背景色。例如: ```css table tr:nth-child(odd) { background-color: #f2f2f2; } table tr:nth-child(even) { ...

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

    在jQuery中,操作HTML表格(table)是一种常见的需求,尤其在网页交互和数据展示中。以下是一些关于jQuery操作表格的常用方法和技巧: 1. 鼠标移动行变色: 这个功能可以通过`.hover()`事件来实现。当鼠标悬停在...

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

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

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

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

    JQ 隔行变色

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

    jQuery简单实例.zip

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

    自己挑选的几个Jquery特效

    在IT行业中,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。这里我们关注的是几个与jQuery特效相关的资源,包括菜单、表格样式和树形列表等。以下是对这些特效的...

    一个JQuery操作Table的代码分享

    这篇文章分享了使用JQuery对HTML中的表格(Table)进行各种操作的代码示例,下面我将根据所提供的内容详细解释这些知识点。 ### 一、数据准备 在HTML文档中,首先定义了四个表格(Table),分别命名为`table1`、`...

    jquery实现表格隔行换色效果

    通过在HTML文档的`&lt;head&gt;`标签内引入jQuery库,然后在页面加载完成后(使用`$(function(){...})`确保DOM完全加载),使用jQuery的`:odd`和`:even`选择器为表格的奇偶行添加之前定义的CSS类。 ```javascript $...

    jQuery实现隔行变色的方法分析(对比原生JS)

    下面的代码展示了如何使用这两个选择器为表格的奇偶行设置不同的背景色: ```javascript $('table tr:odd').css('background', 'orange'); $('table tr:even').css('background', '#abcdef'); ``` 另一种jQuery...

    jQuery实现table隔行换色和鼠标经过变色的两种方法

    一、隔行换色 代码如下: $(“tr:odd”).css(“background-color... :nth-child 匹配其父元素下的第N个子或奇偶元素 二、鼠标经过变色 代码如下: $(“tr”).live({ mouseover:function(){ $(this).css(“background-colo

    基于JavaScript实现动态创建表格和增加表格行数

    在提供的代码中,通过判断行索引`i`的奇偶性来交替设置行的背景色。如果行索引`i`是奇数(即`i % 2 == 1`),将背景色设置为`#F4FAC7`;如果行索引是偶数,则背景色设置为`white`。 ### 知识点三:动态增加表格行数...

Global site tag (gtag.js) - Google Analytics