html table 奇偶行变色

2024-11-04

html的table列表根据奇数还是偶数行显示不同颜色

<tr <s:if test="#sts.even"> class="table_1" onMouseOut="this.className='table_1'" onMouseOver="this.className='tab_over'"</s:if><s:else> class="table_2" onMouseOut="this.className

nth-child() 应用背景 CSS3的nth-child() 选择器,我之前很少用,在做表格偶数行变色的时候,我通常在绑定的时候,做一个js判断,来加一个css,从而使表格偶数行和奇数行颜色不一样.这样的兼容性很好.但是最近在做手机网站的时候,由于手机网站对浏览器兼容要求相对较低,手机浏览器大部分都支持css3,这就大大提高了开发效率.可以随意使用CSS3 :nth-child()伪类选择器. nth-child()浏览器支持 IE9及以上版本,火狐,谷歌,Safari ,Opera都支持

html table奇偶行颜色设置 (CSS选择器)

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型.n 可以是数字.关键词或公式. 下面的例子, 设置表格的奇偶行背景颜色不同:单独设置表格的第1列背景颜色不同. <!DOCTYPE html> <html> <head> <style type="text/css"> table{ height: 200px; width:400px; border:2px solid green; } td{ bor

c# maiform父窗体改变动态的gridew 奇偶行变色的快捷方法

无需在每个usercontrol里边单个指定控件内gridview 隔行换色.只需要在主窗体内改成统一就好了做到这点要明白.gridcontrol 是usercontrol 的子控件 , gridview是gridcontrol的子控件通过for循环或者foreach 的方式查找各自的子控件,最终找到当前打开的gridview 窗体的对象.操作它. 修改属性.目的达到.上代码 //添加行变色 void ShowColor() { foreach (Control control in th

table奇偶行设置颜色代码

DEV GridControl TableView隔行换色/奇偶行换色

GridControl中的TableView“奇偶行换色”这件事情纠结了我好几天,虽然已经是上个月的事情,好歹记录一下吧,万一有谁要用到呢. GridControl是长这个样子的, <dxg:GridControl AutoPopulateColumns="True" > <dxg:GridControl.View> <dxg:TableView AllowPerPixelScrolling="True" ShowTotalSummar

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

虽然jquery流行已经很多年了,一直都感觉很难,也没有花时间去学习它,只是偶尔哪天心血来潮了去看一点点,时隔多日又会忘得一干二净.最近用到表格奇偶行不同色,不得不去再看jquery,虽然感觉还是难,但已经不像以前一样无从下手了.做完后不得不来感叹一下jquery真是太牛了,不用自己再写一大堆javascript函数去实现了,简单几句轻松搞定. 先定义好表格的奇偶行样式,如下代码: body { font-size:12px; } th { color: #FFFFFF; background:

纯CSS3代码实现表格奇偶行异色，鼠标悬浮变色

1.首先会用到<tr></tr>元素两个伪类,nth-child()和hover. 然后需要注意的是伪类都是通过冒号引用的,不是点号,即tr:hover{} 其次,CSS代码中要注意顺序. tr:nth-child(odd){ background-color:#CFF;} tr:nth-child(even){ background-color:#699;} tr:hover{ background-color:#F0C;} 写成这样是可以正常完成所需要的功能的,但是如果你写成

table中嵌套table，如何用jquery来控制奇偶行颜色

总是要趁着自己还有记忆的时候,把该记录下来的都记录下来,着实是不敢恭维自己的记性. 相信很多时候,我们前端人员,经常会用到table里面的某个td中还嵌套着table,而这个时候还总要去弄奇偶行的颜色,里面那个嵌套的table也要弄. 今天就是这样.如果只是单纯弄最外层的table还好一点. 闲话不多说,先贴个效果图把. 当然我不会把全部的代码都贴出来,相信大家也写得出来. 首先最外层的table,我们给它一个class="even_a_mid",给最外层的奇偶行赋予颜色 $(&quo

word-wrap&&word-break，奇偶行、列设置样式

1.word-wrap和word-break区分. 来源场景:机械租赁mvc驾驶员信息查看: 当备注的文字多的时候,第一列的值成这模样: 解决方案:设置table 的td可自动换行.首先table设置固定样式:table-layout:fixed 再把td样式改成: td { word-wrap: break-word; }. 2.奇偶行.列设置样式. 来源场景:设置好换行后,可第一列太宽,用内联样式设置td宽度也不管用,如下图所示: 解决方案:最后原因是:在tabl

DOM操作--表格点击行变色

点击表格行变色,这种网页效果应该还是比较常见的.大家应该看见了,我这里的效果是用DOM操作实现的,那么很多人会问什么是DOM操作,贴出代码之前我就和大家解释一下什么是DOM操作: DOM是Document Object Model的缩写,意思是文档对象模型,是由W3C制定的一套访问和操作XML(eXtensible Markup Language)文档的标准,即API.比如DOM告诉JavaScript引擎如何在浏览器窗口中显示和操作XML创建的标记(Tag).根据W3C DOM规范(http:

如何修改antd中表格的表头样式和奇偶行颜色交替

在做antd表格时通常会用到table组件,但是table的表头时给定的,那么怎么修改表头的颜色呢? 这里用的时less的写法,在全局环境中写,所有的table表头都会变成自己定义的颜色定义好表头的颜色之后,在表格中需要奇偶行的颜色不一样类似于下面的这种可以用下面的方式定义行的样式: 在table中加上rowClassName,rowClassName是表格行的类名,接受两个参数,其中index表示第几行,这里的行数不包括表头,然后做一下判断,奇偶行给不同的样式就可以了

FastReport.Net使用：[35]奇偶行

文本控件类型的奇偶行数据实现(普通) 1.普通的奇偶行数据主要使用报表对象的EvenStyle(偶数行样式)属性实现. 首先通过报表-->样式菜单打开样式编辑器,编辑几个备用样式. 样式的编辑这里不介绍了,不了解的童鞋参考[FastReport.Net使用:[27]样式使用]这篇经验. 2.选择报表中的数据Text(直接多选,都选中),然后设置其EvenStyle属性为“数据2”. 注意EvenStylePrioriry(偶数行样式优先权):默认情况下UseFill,仅使用背景色:如需使用全

jquery实现奇偶行赋值不同css值

<html> <head> <title>jquery奇偶行css效果</title> <script src="../../jquery/jquery.js" type="text/javascript"></script> <style type="text/css"> /*table中偶数行*/ .tabEven { background: #9d8e8b;

CSS如何实现把鼠标放在行上整行变色

CSS如何实现把鼠标放在行上整行变色: 在很多网站都有这样的效果,那就是当鼠标放在一个文章列表行的时候,此行就会显示与其他行不同的颜色,本站的文章列表也具有这样的效果,便于浏览者识别,非常人性化,下面就简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content=&quo

js div及table首行顶部吸附示例

js div顶部吸附示例,例如这样: 以下为DIV顶部吸附示例:(此示例来自于网络,在此记录与分享!感谢原作者!) 示例1:兼容IE6 <div style="height:300px;background:#e0e0e0"></div> <div id="fixedMenu" style="background:#ffffff;width:100%;"> <ul> <li><a

JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）

前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽如人意.先把它分享出来,以后想到更好的办法再优化吧. 一.效果展示 1.拖动前 2.拖动中 3.拖动后 4.撤销回到拖动前状态二.需求分析通过上篇我们知道,如果要实现拖拽,必须要有一个可以拖拽的标签,或者叫容器,比如上篇里面的tr就是一个拖拽的容器,那么如果要实现选择行的拖拽,那么博主的第一反应

jQuery实现表格隔行换色且感应鼠标高亮行变色

jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51.net/article/30047.htm jQuery技术之事件处理 http://blog.csdn.net/woshisap/article/details/7434010

安卓GridView奇偶行不同颜色

背景:安卓制作表格,两列多行,奇数行和偶数行背景色不同分析:GridView是经常用来制作表格的,但是和ListView不同,不能简单的用position % 2 == 0/1 来判断奇偶行,下面提供一个方案来解决问题 // adapter 中 private static boolean flag = true; // 以下在getView 中 // 奇偶行显示不同颜色 if (flag){ flag = (position % 2) == 0; holder.textView.setBac

二、WPF datagrid 行变色

public void Color(){ DataGridRow row1 = (DataGridRow)this.dgSource.ItemContainerGenerator.ContainerFromIndex(i); if (row1 != null) row1.Background = new SolidColorBrush(Colors.Red);} 这里有个坑,初始化时不能变色,必须等datagrid完成渲染后才能进行这种行变色. 因而先把form show 出来之后才执行变色方法

jQuery table tr隔行变色，鼠标移入移出变色，鼠标点击变色

.trover { background: #f9f9f9; } .trclick { background: #c4e8f5; } .treven{ background:#CCFFCC; } .trodd{ background:#ffffff; } $(function () { //鼠标移入该行和鼠标移除该行的事件 jQuery("#ajaxTable tr:gt(0)").mouseover(function () { jQuery(this).addClass("