table 控制单双行颜色以及鼠标hover颜色 table光棒
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>table 控制单双行颜色以及鼠标hover颜色</title>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<style type="text/css">
a
{
font-size: 16px;
line-height: 20px;
}
a:link
{
color: Black; /*未访问：黑色、无下划线 -*/
text-decoration: none;
}
a:active:
{
color: Orange; /*激活：红色 -*/
}
a:visited
{
color: Black;
text-decoration: none; /*已访问：Black、无下划线 -*/
}
a:hover
{
color: Orange;
text-decoration: underline; /*鼠标移近：红色、下划线 -*/
}
p
{
width: 700px;
margin: 10px 0 0 0;
padding: 10px;
border: 0;
border: 1px dotted Orange;
background: #f5f5f5;
min-height: 25px;
}
table.tableList
{
border-collapse: collapse;
border: solid 1px Orange;
width: 100%;
text-align: center;
}
table.tableList th
{
padding: 1px 6px;
line-height: 21px;
font-weight: bolder;
}
table.tableList td
{
padding: 1px 6px;
line-height: 21px;
}
table.tableList .hot
{
background-color: #FFFACD;
}
table.tableList .toleft
{
text-align: left;
}
table.tableList .toright
{
text-align: right;
}
table.tableList .tomiddle
{
text-align: center;
}
</style>
<script language="javascript" type="text/javascript">
window.onload = function () {
changeTableStyle();
}
function changeTableStyle() { //修改数据列表样式
var oldcolor;
$(".tableList td").css({ 'border-left': '#C9CACA 1px solid', color: '#000' });
$(".tableList tr:even").css('background-color', '#E2E7EA');
$(".tableList tr").hover(
function () {
if ($(this).attr("class") != "trhead") {
oldcolor = $(this).css('background-color'); $(this).css('background-color', '#BADDE9')
}
},
function () {
if ($(this).attr("class") != "trhead") {
$(this).css('background-color', oldcolor)
}
}
);
$(".trhead").css({ background: "Orange" });
}
</script>
</head>
<body>
<p>
table 控制单双行颜色以及鼠标hover颜色<br />
hot :tr背景变色
<br />
tomiddle:td内文字居中
<br />
toright:td内文字居右<br />
toLeft :td内文字居左<br />
</p>
<br />
<table class="tableList">
<tr class="trhead">
<th>
来源
</th>
<th>
标题
</th>
<th>
标题
</th>
<th>
标题
</th>
<th>
标题
</th>
<th>
标题
</th>
</tr>
<tr>
<td>
<a href="http://www.cnblogs.com/Orange-C/">Orange.</a>
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
</tr>
<tr>
<td>
<a href="http://www.cnblogs.com/Orange-C/">Orange.</a>
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
</tr>
<tr class="hot">
<td>
<a href="http://www.cnblogs.com/Orange-C/">Orange.</a>
</td>
<td class="tomiddle">
测试文字
</td>
<td class="toright">
测试文字
</td>
<td class="toleft">
测试文字
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
</tr>
<tr>
<td>
<a href="http://www.cnblogs.com/Orange-C/">Orange.</a>
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
</tr>
<tr>
<td>
<a href="http://www.cnblogs.com/Orange-C/">Orange.</a>
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
</tr>
<tr>
<td>
<a href="http://www.cnblogs.com/Orange-C/">Orange.</a>
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
</tr>
<tr>
<td>
<a href="http://www.cnblogs.com/Orange-C/">Orange.</a>
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
</tr>
<tr>
<td>
<a href="http://www.cnblogs.com/Orange-C/">Orange.</a>
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
</tr>
<tr>
<td>
<a href="http://www.cnblogs.com/Orange-C/">Orange.</a>
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
<td>
测试文字
</td>
</tr>
</table>
</body>
</html>
效果图：
附件下载：http://files.cnblogs.com/Orange-C/TableDemo.zip 出处 http://www.cnblogs.com/Orange-C/p/4049832.html
table 控制单双行颜色以及鼠标hover颜色 table光棒的更多相关文章
- repeater单双行颜色不同，gridview repeater DataList 鼠标经过改变背景颜色
1.gridview 双击GridView的OnRowDataBound事件: 在后台的GridView1_RowDataBound()方法添加代码,最后代码如下所示: protected void ...
- html table单双行颜色间隔（转载）
直接上代码: <html> <head> <meta http-equiv="Content-Type" content="text/htm ...
- js改变,设置table单双行颜色,jquery改变,设置table单双行颜色
1.js实现单双行以不同颜色显示 $(document).ready(function () { var color = "#ffeab3"; $("#GvList tr ...
- Js实现table单双行交替色
依稀记得,当初我刚学编程的时候还学过怎么实现表格单双行交替色,现如今早已记不清当时的实现思路,这两天突然想起,没事就自己写了一小段代码,也不知道是否是当年的思路,不过不用纠结这个问题.:) 代码很简单 ...
- js控制表格单双行颜色交替显示
<script language="JavaScript"> window.onload = function() { var Table=document.getEl ...
- 奇偶选择器：使用odd和even属性实现表格单双行颜色相间和不同
一.奇偶选择器 表格在呈现数据的时候我们为了方便观看,而隔行显示不同的颜色,虽然可以用用类选择器 class实现这种效果,但是未免太过麻烦,为了更加简便地表现这种特殊的效果我们需要用到一种特殊的选择器 ...
- python - 用户交互/数据类型/格式化输出/运算符/流程控制单双多分支
python:用户交互: 等用户输入,做反应: username=input("username:")password=input("password:")pr ...
- css单双行样式
#random_box li:nth-child(odd) {//双行 background: #fff5c4; } #random_box li:nth-child(even) {//单行 back ...
- PB中datewindow单双行显示不同颜色
调出datewindow,找到detail中的列,右击properties,左侧Background中的color属性添加 IF(MOD(GETROW(),2)=0,RGB( 255, 250, 20 ...
随机推荐
- Oracle ORA-01722: 无效数字 处理方法
C# + Oralce 10G 项目中 有用参数处理Update语句.参数命名和表字段同名.执行报错: ORA-01722: 无效数字 后修改所有的参数和对应字段不同.解决. 修改前: StringB ...
- POMDP
本文转自:http://www.pomdp.org/ 一.Background on POMDPs We assume that the reader is familiar with the val ...
- (四)G1 garbage collector
g1专为大内存,多内核机型设计.可以兼顾高吞吐量和低暂停时间. g1将堆分为多个相同大小内存块,并发的标记线程,使得g1掌握了各个内存块的活对象数量, 内存回收阶段,g1根据用户指定的暂停时间,选择部 ...
- 72. 求m到n之和
求m到n之和 int sum(int m, int n) { int i, result = 0; for (i=m; i<=n; i++) result = result+i; return ...
- 著名的sql注入问题-问题的原因分析及总结
Statement安全漏洞(sql注入问题)问题展示: 首先我的Mysql数据库中有一张users表,如下图所示 /** * 根据用户名查询用户 * @param username 需要查询的用户名 ...
- 【Html 学习笔记】第二节——文本格式
上一节基本已经了解了一些html的基础,这一节主要学习html处理文本相关内容,直接看内容吧. 字体: 预格式文本:<pre> 地址:<address> 缩写:<abbr ...
- https://yq.aliyun.com/articles/65125?spm=5176.100240.searchblog.18.afqQoU
https://yq.aliyun.com/articles/65125?spm=5176.100240.searchblog.18.afqQoU
- 添加到SQLAgentReaderRole角色后报拒绝SELECT权限
最近有点大意,同事需要查看作业的权限,"理所当然"就将对应登录名添加到SQLAgentReaderRole角色. msdb的SQLAgentReaderRole数据库角色的成员继承 ...
- xshell 语句
使用命令 cd 切换到tomcat的bin目录,如:cd /root/Test_APP_Project_CRM/bin 使用命令 [ ./startup.sh ]启动tomcat服务../star ...
- C++程序员如何入门Unreal Engine 4
摘要: 一位程序员网友小保哥分享自己的UE4快速上手过程,只是笔记,52VR做了一点更加适合阅读的修改,整理给大家. 首先,本文只是针对有比较熟练C++技能的程序员,他可以没有任何图形学或游戏引擎方面 ...