`

使用js 给表格奇偶行添加背景颜色

 
阅读更多

效果图:

<table>

<tbody>

<tr>

<td colspan="3">1</td>

<td>11</td>

<td>12</td>

</tr>

<tr>

<td colspan="3">2</td>

<td>21</td>

<td>22</td>

</tr>

<tbody>

</table>

 如果给这样的跨行表格添加背景颜色 不能整行的添加 不然会有点难。下面是我实现的

function changeColor_s(){
 if($(".tab_new tr").length>1){
        $(".tab_new tr").each(function(){
         var num=$(this).children("td").length;
         if(num==7){
          $(this).children("td").eq(0).css("background","#FFF");
         }
        })
    }
}
$(function() {
 changeColor();
  $(".tab_new tr").hover(function() {
   $(this).css("background", "#E1F1FB").css("cursor", "auto");
   changeColor_s();
  },function(){
   changeColor();
 });
});
function changeColor(){
  $(".tab_new").each(function () {
     var _this = $(this);
     //奇数行
     _this.find("tr:even").css("background", "#fff").css("cursor", "auto");
     //偶数
  _this.find("tr:odd").css("background", "#F5F9FB").css("cursor", "auto");
   });
  changeColor_s();
}

分享到:
评论

相关推荐

    表格奇偶行设置不同颜色的核心JS代码

    在文档中的示例里,给奇数行设置的背景颜色为"#e6e6fa",给偶数行设置的背景颜色为"#fff0fa"。这两个颜色值是十六进制的颜色代码,你可以根据实际需要调整颜色值来改变行的显示效果。 需要注意的是,在文档中提供的...

    程矢Axure夜话图文教程中继器表格奇偶行换色.pdf

    ### Axure中继器表格奇偶行换色技巧详解 #### 一、引言 在交互设计领域,Axure是一款非常强大的工具,它可以帮助设计师快速创建出功能丰富的原型。其中,“中继器”是Axure中一个十分重要的功能,它可以用来展示...

    jQuery插件 表格奇偶交替,加亮显示

    要实现这些功能,开发者通常会使用jQuery选择器来定位表格的行(`tr`)元素,然后使用CSS类或样式来改变它们的背景颜色。例如,可以使用`.even`和`.odd`类来分别标识偶数行和奇数行,然后在CSS中定义这两个类的背景...

    jquery css 设置table的奇偶行背景色示例

    ### 使用jQuery和CSS设置表格奇偶行背景色 在网页设计与开发中,为了提高表格数据的可读性,我们经常需要对表格中的奇数行和偶数行设置不同的背景颜色。这种做法不仅可以使表格看起来更加美观,还能帮助用户更轻松...

    Axure夜话之中继器系列视频教程之中继器表格奇偶行换色.rar

    《Axure夜话之中继器系列视频教程》是针对Axure初学者和进阶者的一套教学资源,其中“中继器表格奇偶行换色”这一章节专门讲解了如何在Axure RP中利用中继器(Repeater)组件创建交互式表格,实现行颜色的动态切换,...

    如何用jquery控制表格奇偶行及活动行颜色

    例如,在内容部分中,使用`.addClass("odd")`和`.addClass("even")`为表格行添加奇偶类,从而改变它们的背景颜色。 4. **CSS背景颜色的定义** 在内容中提到了使用CSS来定义奇偶行的颜色。在CSS中,背景颜色可以用`...

    自做jQuery插件----表格(奇偶行不同色,鼠标滑过颜色效果,单击高亮)

    3. **应用样式**:在插件内部,我们使用jQuery遍历表格的行,根据行的索引(奇偶性)应用相应的背景颜色。同时,添加事件监听器,当鼠标悬停在行上或点击行时,更改背景颜色。 4. **CSS样式**:`tablegrid.css`中的...

    修改grid行或列颜色

    2. **列颜色修改**:通过 `ColumnModel` 的 `renderer` 属性指定自定义渲染器,可以在单元格级别上设置背景颜色。 3. **灵活性与可扩展性**:这种方式不仅可以让Grid更具可读性,而且易于维护和扩展。比如可以通过...

    Js_CSS实现多色表格

    标题“Js_CSS实现多色表格”表明我们即将探讨如何使用JavaScript和CSS技术来创建具有不同颜色样式的表格。在网页开发中,表格是组织数据的一种常见方式,而通过JavaScript和CSS,我们可以为表格添加交互性以及更丰富...

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

    接着,添加鼠标移入和移出事件,使得当鼠标悬停在某一行时,该行的背景色发生变化,这样可以突出显示用户正在查看的行。在JavaScript中,我们可以为每行元素绑定`onmouseover`和`onmouseout`事件。当鼠标进入某行,...

    动态Javascript表格实例

    本教程将深入探讨如何使用JavaScript创建动态的表格实例,包括表格的动态增删行功能以及鼠标移动时单元格变色和奇偶行颜色变化的效果。 首先,让我们了解HTML中的表格基础。`&lt;table&gt;`元素用于定义一个表格,`&lt;tr&gt;`...

    基于JQuery的js排序与表格颜色交替显示

    在这个例子中,我们遍历表格中的每一行,并根据行号(索引)的奇偶性添加不同的CSS类。然后,在CSS中定义这两个类的背景色,就可以实现颜色交替的效果。 然而,如果表格内容是动态加载或者分页的,我们需要确保在新...

    js控制表单奇偶行样式的简单方法

    这样,你就成功地用JavaScript实现了对表格奇偶行样式的控制。 总结一下,控制表格奇偶行样式的核心在于对行元素(tr)的遍历和条件判断。使用jQuery时,利用`:odd`和`:even`选择器可以简化代码;而纯JavaScript则...

    用jquery编辑的可更改表格内容的斑马表

    斑马表的样式应该在其中设定,包括奇偶行的背景颜色、单元格的边框以及鼠标悬停时的高亮效果等。 总的来说,"用jQuery编辑的可更改表格内容的斑马表"是将HTML表格与jQuery结合,通过JavaScript实现交互性,利用CSS...

    表格奇数偶数行条纹效果(jQuery)

    要实现奇偶数行条纹效果,我们首先需要在CSS中定义两种不同颜色的背景,通常为浅色和深色。例如,可以创建两个类`odd`和`even`,分别对应奇数行和偶数行: ```css .odd { background-color: #f2f2f2; } .even { ...

    jquery实现表格奇数偶数行不同样式(有图为证及实现代码)

    定义了两个对象odd和even,分别存储了奇数行和偶数行的背景颜色和文字颜色。 然后定义了一个名为odd_even()的函数,它接受三个参数:表格的id、奇数行的样式对象以及偶数行的样式对象。该函数的作用是遍历指定id的...

    21个新奇漂亮的AjaxCSS表格设计

    - **Stripe your tables the OO way**:使用JavaScript为表格行添加颜色条纹,增强视觉效果。 - **MooTools TableRow & Column highlighting**:基于MooTools框架,实现鼠标悬停时的单元格行和列高亮显示。 - **...

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

    这种技术主要是通过CSS(层叠样式表)来实现的,使得表格的每一行交替显示不同的背景颜色,从而形成视觉上的区分。在本案例中,"网页里面表格隔行变色代码" 描述了一种实现表格隔行变色的方法,包括奇偶数行的变色...

    JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享

    而JavaScript脚本将会通过wi函数(即document.write)来动态地添加表格的行和单元格。 2. **隔行换色的实现** - 在创建表格行时,使用了if语句来判断当前行的行号。利用模运算符(%)来判断行号是否为偶数,以此来...

Global site tag (gtag.js) - Google Analytics