`

用jquery和css使表格颜色变化的一些代码

阅读更多
js

$(document).ready(function(){
  $("tr:has(th)").css(  
  { "backgound-color":"666666","color":"white","font-size":"0.9em"} 
  );
 
  $("tr:even").addClass("myeven");
  $("tr:odd").addClass("myodd");
 
  //相当于。hover 相当于mouse out 和over
  $("tr:not(has(th))").hover( 
     function(){ $(this).addClass("mytr");},
function(){$(this).removeClass("mytr");}
  );
  $("td").hover(
   function(){$(this).addClass("mytd");},
   function(){$(this).removeClass("mytd");}
    );

css

.myeven{
text-align:left;
background-color:#666699;
color:white;
}

.myodd{
text-align:left;
background-color:#669999;
color:white;

}

#formOne{
    padding-left:100px;

}

/* 移动上去变化的css */
.mytr{
     background-color:#ff9933;
color:black;

}
.mytd{
text-align:center;
    background-color:#0F0;
color:black;

}
分享到:
评论

相关推荐

    Jquery 表格颜色渐变

    总的来说,"Jquery 表格颜色渐变"涉及了HTML、CSS和jQuery的结合使用,通过这些技术可以创建出交互性更强、视觉效果更佳的表格,提高用户在网页上的操作体验。在实际项目中,还可以根据需求扩展,例如添加多级颜色...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    2.jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3.jQuery+CSS实用图片收缩与放大效果插件 4.jquery+div实现同时滑动切换的图文展示特效插件下载 5.jquery+div带动画按钮图片手动与自动切换的特效...

    jquery实现表格排序

    要在网页中使用jQuery表格排序插件,首先需要确保已经正确加载了jQuery库。接着可以通过以下步骤引入jQuery TableSorter插件: ```html <!DOCTYPE html> <title>jQuery表格排序示例 <!-- 引入jQuery库 --> ...

    jquery实现表格多选,单击颜色加深,再点击颜色还原,隔行换色,源代码

    在本文中,我们将深入探讨如何使用jQuery来实现一个功能丰富的表格,包括多选、单击颜色变化、再次点击颜色还原以及隔行换色的效果。这些功能对于提高用户体验和交互性非常有帮助,尤其是在数据密集型的Web应用中。...

    jQuery表格列表拖动排序代码.zip

    在压缩包中的`jiaoben5320`可能是实现这个功能的源代码文件,可能包含HTML结构、CSS样式和jQuery脚本。`说明.htm`则可能包含了详细的使用指南或者示例演示。开发者可以通过阅读这些文件,理解并学习如何将此功能应用...

    jQuery+CSS3实现的留言表格表单内容验证特效源码.zip

    在IT领域,网页开发是不可或缺的一部分,而jQuery和CSS3是两种非常强大的工具,用于创建交互性和视觉吸引力的网页元素。在这个"jQuery+CSS3实现的留言表格表单内容验证特效源码"项目中,我们可以深入探讨这两个技术...

    CSS Hover表格变色样式特效.zip

    在这个“CSS Hover表格变色样式特效.zip”压缩包中,包含了一个实用的jQuery和CSS结合实现的表格元素hover效果的代码示例,该示例可以方便地应用于网页中,为用户提供更直观和友好的交互体验。 首先,我们来理解CSS...

    jQuery Table选中表格行变色代码.zip

    本资源“jQuery Table选中表格行变色代码.zip”提供了一个实用的功能,即当用户点击表格中的某一行时,该行会变色,以突出显示用户的选择。这个功能在数据展示和交互性较强的网页中十分常见,例如在数据分析、电商...

    jquery中tablesorter隔行颜色变化以及对应表格拖拽技术

    `widgets: ["zebra"]`会自动为表格应用隔行颜色变化,使得视觉效果更佳。 对于描述中提到的“表格行拖动”功能,TableSorter并没有内置的解决方案,但可以通过结合其他插件如jQuery UI的draggable和droppable来实现...

    一天搞定jQuery(二)——使用jQuery表格的隔行换色

    在本教程中,我们将深入探讨如何使用jQuery实现表格的隔行换色效果,这是一项常见的网页美化技术,可以使用户在浏览数据时有更好的视觉体验。jQuery作为一个强大的JavaScript库,提供了丰富的功能来简化DOM操作,让...

    jQueryUI拖拽效果_拖拽div的值到table表格里面

    4. **CSS样式**: 为了提高用户体验,通常需要为可拖动的div和可放置的区域添加适当的CSS样式,以突出其状态,如悬停时的边框颜色变化。 5. **资源引用**: 文件`index.html`应该包含对jQuery、jQuery UI库以及相关...

    一个简单的jquery设计的一像素表格

    在网页设计中,一像素表格(One-Pixel Table)是一种常见的布局技巧,它利用CSS的边框和背景颜色创建出看似只有单个像素宽度的表格,以实现细致的布局效果。这种技术尤其适用于需要精确控制内容对齐和间距的情况。在...

    jquery 图表插件可编辑表格生成走势图jquery 图表统计

    本文将详细探讨与“jquery 图表插件可编辑表格生成走势图jquery 图表统计”相关的知识点,帮助你更好地理解和应用这些技术。 首先,jQuery图表插件是用于在网页上创建各种可视化数据的工具,它们可以将复杂的数据...

    jquery实现表格的光棒效果

    在本示例中,我们将探讨如何利用jQuery来实现一个特定的交互效果:当鼠标悬停在表格上时,行或单元格的颜色发生变化,以及如何实现表格的全选功能。 首先,我们需要在HTML中创建一个基本的表格结构。表格通常由`...

    JQuery可编辑表格小结.docx

    在`table.js`中,我们看到JQuery代码用于实现表格的可编辑功能。当用户点击奇数行的单元格(假设这里是“编号”列)时,单元格内的文本会变为一个可编辑的输入框。这是通过选择所有偶数索引的`td`元素(即编号列),...

    Jquery 实现表格颜色交替变化鼠标移过颜色变化实例

    有时为了提高用户体验,开发者会添加一些动态的交互效果,比如表格的行颜色交替变化,以及鼠标悬停或点击时的颜色变化。以下内容将详细介绍如何使用jQuery来实现这些效果,并提供相关的HTML代码和jQuery脚本。 ####...

    jquery,鼠标悬停。表格行的背景随之改变

    表格行的背景随之改变",指的是使用 jQuery 实现了一个功能:当用户将鼠标悬停在 HTML 表格的某一行上时,这一行的背景颜色会发生变化,当鼠标离开时,背景颜色恢复原状。这样的交互设计可以提高用户体验,使用户更...

    jQuery左右列表选择点击切换代码

    在这个案例中,CSS将用于设置列表的布局、颜色、字体以及鼠标悬停和选中状态时的样式。例如,可以设定当鼠标悬浮在列表项上时背景色的变化,或者选中某项后高亮显示的样式。 JS(JavaScript)文件,可能被命名为`...

    css3表格突出显示特效代码

    `使背景颜色变化时有0.5秒的平滑过渡。 5. **自定义字体和文本样式** (Custom Fonts and Text Styles): CSS3允许我们使用`@font-face`规则引入自定义字体,以及通过`font-family`, `font-size`, `color`, `text-...

    JS+CSS3服务器价格表样式代码.zip

    jQuery库的使用降低了代码复杂性,提高了性能,同时提供了丰富的插件和扩展,如jQuery UI,可以进一步增强价格表的功能。 综上所述,"JS+CSS3服务器价格表样式代码.zip"是一个集成了JavaScript和CSS3技术的资源,...

Global site tag (gtag.js) - Google Analytics