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 ...
随机推荐
- cxf webservice简单应用
Server端 server部署到一个端口号为80的tomcat中 CXFController.java package com.lwj.controller; import java.io.IOEx ...
- Symmetric Multiprocessor Organization
COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION
- IO复用三种方式
简介 IO复用技术,简单来说就是同时监听多个描述符.在没有用到IO复用以前,只能是一个线程或一个 线程去监听,服务端同时有多个连接的时候,需要创建多个线程或者进程.而且,并不是所有的连 接是一直在传输 ...
- 延时调用的php代码
比如我们想做一个类似于康盛uchome的定时触发任务,任务靠用户访问触发的,但是你触发任务是不能影响用户本身对页面的访问速度(也就是说不能任务执行十秒钟你就让用户等待十秒钟)刚好昨天把这个弄完了.拿出 ...
- .net使用OpenPop自动收邮件，并将邮件内容存入数据库
1.下载OpenPop,将OpenPop添加到解决方案中. 2. else if (e.CommandName == "ConnectTest") { string sSERVER ...
- [转载]Ubuntu17.04（Zesty Zapus）路线图发布：2017年4月13日发布
Canonical今天公布了Ubuntu 17.04(Zesty Zapus)操作系统的发布路线图,该版本于今年10月24日上线启动,toolchain已经上传且首个daily ISO镜像已经生成.面 ...
- Java语言程序设计(基础篇) 第六章 方法
第六章 方法 6.2 定义方法 1.方法的定义由方法名称.参数.返回值类型以及方法体组成. 2.定义在方法头中的变量称为形式参数(formal parameter)或者简称为形参(parameter) ...
- EasyUI树和Ztree树冲突问题
1.今天做项目的时候出现了如下的错误. 报错:TypeError: $(...).tree is not a function 代码如下: 这是EasyUI的页面部分 $(function(){ $( ...
- win7下开启telnet命令
win7下开启telnet命令 win7上telnet这条命令默认被关闭了. 开启telnet方法如下: 一,打开控制面版 二,选择程序 三,选择打开或关闭windows功能 在弹出窗口中把 Teln ...
- kdiff3的主窗口说明 Base Local Remote 分别代表什么分支