`

用CSS实现隔行变色的技术

阅读更多
.Pop_TR{
     background-color:expression(this.rowIndex%2==0 ? "一种颜色":"另一种颜色");
     cursor:hand;
}

 

<table>
//循环取列表
    <tr lcass="Pop_TR">
       <td></td>
    </tr>
//循环结束
</table>

 


JQuery的话也很简单

1.
通过定义俩个class来实现

$("tr:even").addClass("even-row"); 
$("tr:odd").addClass("odd-row"); 

 

2.
或者一行代码 

$("tr").each(function(i){this.style.backgroundColor['#ccc','#fff'][i%2]})   

  

 

分享到:
评论

相关推荐

    jQuery动态生成隔行变色的table

    在网页开发中,为了提升用户体验,我们经常需要对表格数据进行视觉优化,其中一种常见的方法是实现隔行变色的效果。这个技术可以帮助用户更轻松地分辨表格中的每一行数据,提高阅读的舒适度。本教程将详细介绍如何...

    表格隔行变色

    例如,你可以使用`&lt;c:forEach&gt;`标签遍历数据库查询结果,并在循环中根据行索引判断是否为偶数,以此来插入不同的CSS类,实现隔行变色: ```jsp ${yourDataList}" var="item" varStatus="status"&gt; ${status....

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

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

    CSS2+JS实现table隔行变色

    总结起来,结合CSS2和JavaScript可以轻松地为表格实现隔行变色的效果。在CSS中,我们利用`:nth-child()`伪类选择器或者自定义类来定义行的样式;在JavaScript中,我们通过DOM操作动态地添加或移除这些样式类,确保...

    表单数据验证_表格隔行变色效果_复选框的操作_好友列表_省市菜单联动效果

    这通常通过CSS实现,使用`nth-child`选择器来选择偶数行或奇数行并设置不同的背景颜色。例如: ```css tr:nth-child(even) { background-color: #f2f2f2; } ``` 这样,表格的每一行将交替显示不同的背景色,使得...

    表格隔行变色,jquerys

    总结,使用jQuery实现表格隔行变色是一种常见的网页美化技术,它提高了数据展示的清晰度,使用户更容易阅读和理解表格内容。通过选择器选择表格行,应用CSS样式,再结合响应式设计和兼容性处理,可以创建出既美观又...

    隔行变色和鼠标滑过变色

    #### 一、使用`expression`实现隔行变色 `expression`是Internet Explorer特有的一种脚本表达式属性,它可以动态地改变元素的CSS样式。例如,在HTML文档中可以这样设置表格的背景色: ```html &lt;style type="text/...

    实用的隔行变色,支持3种颜色.rar

    在CSS中,我们可以使用`:nth-child()`选择器来实现隔行变色。例如,为偶数行设置一种颜色,为奇数行设置另一种颜色: ```css tr:nth-child(even) {background-color: #f2f2f2;} tr:nth-child(odd) {background-...

    JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】

    从给定的文件信息中,我们可以提炼出以下知识点: ### JavaScript表格隔行变色 ...通过上述知识点,我们可以系统地理解如何使用JavaScript和JQuery实现表格隔行变色和Tab标签页特效,以及这些技术在前端开发中的应用。

    css+js隔行换色

    以上就是使用CSS和JavaScript实现隔行换色的方法。这种技术在显示大量数据时能提高可读性,同时通过JavaScript增强动态适应性,确保在各种场景下都能保持良好的用户体验。在实际项目中,根据具体需求和浏览器兼容性...

    隔行颜色不同、隔行颜色不同

    虽然这个效果可以通过纯CSS实现,但有时候我们可能需要在某些特定事件(如页面加载、滚动或用户交互)后动态改变颜色。这时,jQuery可以帮助我们。例如,我们可以在页面加载完成后改变行的颜色: ```javascript $...

    jquery 15天学习笔记 02 table表格 隔行变色的问题

    在实现隔行变色时,我们会重点关注`&lt;tr&gt;`元素,因为它是控制行样式的部分。 jQuery是一个强大的JavaScript库,它简化了DOM操作,使得动态改变表格样式变得轻而易举。在这个例子中,我们可能需要使用到的选择器有`$...

    纯JS代码实现隔行变色鼠标移入高亮

    纯JS代码实现隔行变色和鼠标移入高亮是一种高效且直接的方法,不需要依赖于任何第三方库,使用原生JavaScript即可完成。 从给定文件中提取的知识点可以分为以下几个部分详细说明: 1. HTML结构的建立:首先需要...

    可编辑的表格,实现隔行换色等效果

    接着,CSS用于实现隔行换色的效果。这里,我们可以使用伪类选择器`nth-child(odd)`和`nth-child(even)`来分别选择奇数行和偶数行,并赋予不同的背景颜色: ```css table tr.even { background-color: #f2f2f2; } ...

    js实现表格隔行变色

    这里提到的"js实现表格隔行变色"就是一种通过JavaScript来动态改变HTML表格行背景色的技术。在给出的代码示例中,我们看到一个简单的实现方式。 首先,`window.onload`事件是JavaScript中的一个常见事件,它表示当...

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

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

    jquery table鼠标滑过隔行变色表格样式代码

    2. **CSS 样式**:隔行变色通常是通过 CSS 来实现的。可以使用 `nth-child(odd)` 和 `nth-child(even)` 选择器来选中表格的奇数行和偶数行,并分别设置不同的背景颜色。例如: ```css tr:nth-child(odd) { ...

    javascript实现table表格隔行变色的方法

    在实现隔行变色的函数中,我们会看到for循环的使用来遍历表格中的每一行,以及if-else条件语句来判断奇偶行并进行相应的样式修改。 2. DOM操作:文档对象模型(Document Object Model,简称DOM)是一个跨平台的、与...

    比较有用的效果,LI列表输出,隔行同色

    实现隔行变色的效果,我们主要依赖于CSS,尤其是选择器和背景颜色属性。一种常见方法是使用CSS的`:nth-child`伪类选择器,它可以根据元素在父元素中的位置来应用样式。例如,我们可以为偶数位置的`&lt;li&gt;`元素设置不同...

    javascript表格隔行变色加鼠标移入移出及点击效果的方法.docx

    ### JavaScript表格隔行变色及鼠标交互效果实现 在网页设计与开发中,为了提升用户体验,经常需要对表格中的数据进行美化处理。其中一项常用的技术就是实现表格的隔行变色以及鼠标移入移出、点击等交互效果。本文将...

Global site tag (gtag.js) - Google Analytics