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 ...
随机推荐
- 反射-----学习Spring必学的Java基础知识之一
Java允许通过程序化的方式间接对Class进行操作,Class文件由类装载器装载后,在JVM中将形成一份描述Class结构的元信息对象,通过该元信息对象可以获知Class的结构信息:如构造函数.属性 ...
- ASP.NET State Server 服务 sessionState
在发布ASP.NET网站的时候,出现state server错误:Server Error in '/' Application.----------------------------------- ...
- Canvas小游戏里，删除过期或者死亡元素技巧
在许多canvas游戏,canvas效果中,经常会有过期的元素需要删除 例如现在需要制作一个笨鸟先飞(flappy bird)小游戏,游戏中障碍物(且称为柱子),此时会有一个全局变量保存所有柱子的实例 ...
- poj3740
#include<stdio.h>#include<iostream>int map[16][300];int vistx[16];int visty[300];int zhe ...
- Thinkphp 1.验证规则 2.静态定义 3.动态验证
一．验证规则 数据验证可以对表单中的字段进行非法的验证操作.一般提供了两种验证方式: 静态定 义($_validate 属性)和动态验证(validate()方法). //验证规则 array( ar ...
- Linux一些零碎
1.设置时间和市区 1.tzselect 2.sudo cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime
- django--一对多，多对多查询
假设有表的关系如下: class Classes(models.Model): name = models.CharField(max_length=32) institute = models.Ch ...
- vs2015企业版和专业版秘钥
专业版:HMGNV-WCYXV-X7G9W-YCX63-B98R2企业版:HM6NR-QXX7C-DFW2Y-8B82K-WTYJV 来自http://www.cnblogs.com/xuhongfe ...
- 6.Linux的文件权限与目录配置
Linux文件属性:(- rwx r-x r-- 1 root root 2800 feb 1 11:55 test.txt 顺序按着空格排序,除了时间) 第一组字符代表这个文件是目录.文件或链接文件 ...
- javascript类型与类型检测
1.javascript类型: 注:包装对象:如"hello".length实际为js为我们隐式创建了一个String临时对象,去调用该对象的length属性,调用过后再将该临时对 ...