`

table 奇偶行背景色 鼠标移动行颜色变化

阅读更多
  //设置table中偶数行的背景色


$("#tableID  tr:nth-child(even)").css({"background-color":"#E4F5FF"});
 
//绑定事件当鼠标放到元素上背景颜色,
以及鼠标移开时背景颜色(会根据奇偶行判断设置不同的背景色)


     $("#tableID tr").mouseover(function(){
     	$(this).css({"background-color":"#87CEEB"});
     }).mouseout(function(event){
   		var $index=$(this).index();
   		if($index%2==0){
   			$(this).css({"background-color":"#fff"});
   		}else{
   			$(this).css({"background-color":"#E4F5FF"});
   		}
     });
分享到:
评论

相关推荐

    修改grid行或列颜色

    这个函数的作用是在渲染单元格时,根据当前记录中的颜色值 (`VALEUR_PARAM_GESTION_COULEUR`) 设置单元格的背景色。 ```javascript function renderMotif(data, cell, record, rowIndex, columnIndex, store) { var...

    jQuery操作Table技巧大汇总

    2. 奇偶行不同颜色:通过CSS伪类`:odd`和`:even`,可以轻松地为表格的奇数行和偶数行设置不同的背景颜色,并且可以使用`.addClass()`和`.css()`方法来进一步定制样式。 3. 隐藏一行:使用`hide()`方法可以直接隐藏...

    动态Javascript表格实例

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

    使用jquery hover事件实现表格的隔行换色功能示例

    4. 若要实现奇偶行颜色差异,可以在`each`循环中判断行索引`i`是否为偶数,从而应用不同的背景颜色。 除了上述方法,还可以利用jQuery的`each`函数来一次性设定所有行的背景色,如下所示: ```javascript $("....

    一个JQuery操作Table的代码分享

    1. **鼠标移动行变色** 这个功能可以在用户将鼠标悬停在表格行上时改变行的颜色,增加交互性。以下代码实现了这一功能: ```javascript $("#table1 tr").hover(function() { $(this).children("td").addClass(...

    js常用效果实例

    这个效果是为了使表格数据更易于阅读,通过JavaScript动态地为表格的奇偶行设置不同的背景色。通过遍历表格的行(tr)并根据行索引(奇偶性)添加不同的CSS类,可以实现这个功能。 2. **menu** 在这个实例中,...

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

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

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

    1. **鼠标移动到行更换背景色**: 通过添加和移除CSS类,我们可以实现当鼠标悬停在表格行上时改变背景色的效果。定义一个`.hover` CSS类,然后使用jQuery的`hover()`函数来监听鼠标进入和离开事件,分别添加和移除...

    Bootstrap的class样式小结

    - `.table-hover` 当鼠标悬停在表格行上时,行背景色会高亮,提供交互反馈。 - `.table-condensed` 缩小表格间距,使得表格更紧凑。 - `.table-responsive` 使表格在窄屏设备上呈现滚动效果,通过包裹一个带有`....

Global site tag (gtag.js) - Google Analytics