jquery css 设置table的奇偶行背景色示例
<style>
.even{background:#FFF38F;}
.odd{background:#FFFFEE;}
.selected{background:#FF9900;}
</style>
<script type="text/javascript">
$(function(){
$("tr:odd").addClass("odd");
$("tr:even").addClass("even");
});
</script>
相关推荐
-
表格奇偶行设置不同颜色的核心JS代码
这是一个比较实用的功能,设置奇偶行颜色不同后阅读表格数据的体验明显变好,否则数据会显得非常繁杂拥挤(当表格数据行多时体验尤为明显).只有当你自己真正做这方面的东西接触到时才有强烈的体会,反正我是刚刚经历了,留在这里备参考吧~ 核心JS脚本代码如下(table元素的id根据自己的情况调整,代码中的jquery-1.7.min.js可以到jquery的官网上下载) 复制代码 代码如下: <script src="jquery-1.7.min.js"></script>
-
javascript修改表格背景色实例代码分享
复制代码 代码如下: <html> <script> //点击当前选中行的时候设置当前行的颜色,同时恢复除当前行外的行的颜色及鼠标事件 function selectRow(target) { var sTable = document.getElementById("ServiceListTable") for(var i=1;i<sTable.rows.length;i++) //遍历除第一行外的所有行 {
-
Extjs根据条件设置表格某行背景色示例
话不多说,贴上代码 html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="../extjs3
-
利用JQuery和JS实现奇偶行背景颜色自定义效果
JQuery实现: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Conten
-
一种表格背景色渐变效果的实现
无标题文档 .menu td{ font-size:12px; color:white; font-weight:bold; background-color:#336699; border:1px solid #336699; border:1px solid #336699; filter:blendtrans(duration=1); text-align:center;} function showfilter(obj){ var tds=obj.getElementsByTagName
-
jQuery实现表格奇偶行显示不同背景色 就这么简单
做表格的时候,经常要让奇偶行显示不同背景色,一来使表格显得更美观,二来使同行数据查找更快捷方便.通常我们是怎么实现的呢?就是在每个tr标签上加css样式. 代码如下所示: <html> <style type="text/css"> .odd { background-color:yellow; } .even { background-color:red; } </style> <body> <table border="
-
如何用jquery控制表格奇偶行及活动行颜色
虽然jquery流行已经很多年了,一直都感觉很难,也没有花时间去学习它,只是偶尔哪天心血来潮了去看一点点,时隔多日又会忘得一干二净.最近用到表格奇偶行不同色,不得不去再看jquery,虽然感觉还是难,但已经不像以前一样无从下手了.做完后不得不来感叹一下jquery真是太牛了,不用自己再写一大堆javascript函数去实现了,简单几句轻松搞定. 先定义好表格的奇偶行样式,如下代码: 复制代码 代码如下: body { font-size:12px; } th { color: #FFFFFF;
-
jquery css 设置table的奇偶行背景色示例
复制代码 代码如下: <style> .even{background:#FFF38F;} .odd{background:#FFFFEE;} .selected{background:#FF9900;} </style> 复制代码 代码如下: <script type="text/javascript"> $(function(){ $("tr:odd").addClass("odd"); $("t
-
layui 设置table 行的高度方法
找到layui渲染之后的网页的html代码, 找到table的行控件 在代码中,通过css渲染这个控件 <style type="text/css"> {# 设置table每一行的height #} .layui-table-cell { height: auto; line-height: 28px; } </style> 以上这篇layui 设置table 行的高度方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
antd design table更改某行数据的样式操作
antd Table里面有一个rowClassName方法 表格行的类名 Function(record, index):string-->返回类型是String类型. 例子: import styless from './component/record.css';--->引入css样式. css: .csbsTypes{ font-family:微软雅黑, "Open Sans", "宋体"; font-weight: bold; } 代码: <
-
jquery实现奇偶行赋值不同css值
效果如下: 使用jquery我们可以轻松的实现上面效果,代码如下: 复制代码 代码如下: <html> <head> <title>jquery奇偶行css效果</title> <script src="http://img.jb51.net/jslib/jquery/jquery.js" type="text/javascript"></script> <style type=&quo
-
用javascript css实现GridView行背景色交替、鼠标划过行变色,点击行变色选中
加上鼠标点击选择(其实只是点击后变个颜色,"选择"这个词在这里不合适),顺便把这个直接应用到GridView上,如果是其他的控件,或者直接的HTML,稍加修改也可以用上,这里仅提供一个思路.虽然GridView使用AlternatingRowStyle提供了交替行背景色的问题,但这个东西用着实在不爽,看它生成到HTML的那个table,那叫一个乱啊. 下面是代码,注释应该还算比较详细,比较适合初学者,可以把下面两个文件的代码直接复制到你的项目中直接执行.最下面有文件的下载地址,也可以直
-
jQuery实现获取table中鼠标click点击位置行号与列号的方法
本文实例讲述了jQuery实现获取table中鼠标click点击位置行号与列号的方法.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net 鼠标点击位置行列号</title> </head> <bo
随机推荐
- 详解mysql数据库中文乱码问题
- Linux静态库与动态库实例详解
- asm.js使用示例代码
- php计算2个日期的差值函数分享
- mysql5.6 主从复制同步详细配置(图文)
- 解析php扩展php_curl.dll不加载的解决方法
- ajax实现分页和分页查询
- ASP XML操作类代码
- jsp简单实现页面之间共享信息的方法
- SqlServer应用之sys.dm_os_waiting_tasks 引发的疑问(中)
- 查看mysql语句运行时间的2种方法
- es7学习教程之fetch解决异步嵌套问题的方法示例
- 详谈jQuery unbind 删除绑定事件 / 移除标签方法
- PHP高自定义性安全验证码代码
- 关于loading的一些技巧
- Linux下的代理服务器设置
- Android 显示和隐藏软键盘的方法(手动)
- spring使用RedisTemplate的操作类访问Redis
- Android中AutoCompleteTextView与MultiAutoCompleteTextView的用法
- C#实现复杂XML的序列化与反序列化