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 ...
随机推荐
- php摇杆Tiger摇奖
先说下整体思路,代码已附下方. 1.递归产生一个非中奖数(即非连续数字:'111','222','333','444','555','666','777','888') 2.点击摇奖,把奖项通过设置的 ...
- SQL语法
full outer--全连.两表相同的组合在一起,A表有,B表没有的数据(显示为null),同样B表有,A表没有的显示为(null) A表 left join B表--左连,以A表为基础,A表的全部 ...
- Python爬虫：Xpath语法笔记
一.选取节点 常用的路劲表达式: 表达式 描述 实例 nodename 选取nodename节点的所有子节点 xpath(‘//div’) 选取了div节点的所有子节点 / 从根节点选取 xpat ...
- Android开发使用TotalControl调试遇到的问题（备注）
背景:Android开发,使用TotalControl控制手机进行调试. 过程:Eclipse调试一直正常,某天下午突然提示:无法启动ADB.exe,请确认是否在对应的路径下. 怀疑是自己程序写的有问 ...
- vert.x学习（六），动态模板与静态文件的结合
这篇学习在动态模板里面引入css,把动态模板与静态文件结合起来使用. 编写DynamicReference.java package com.javafm.vertx.helloworld; impo ...
- vert.x学习（三），Web开发之Thymeleaf模板的使用
在vert.x中使用Thymeleaf模板,需要引入vertx-web-templ-thymeleaf依赖.pom.xml文件如下 <?xml version="1.0" e ...
- 使用Qt5.7.0 VS2015版本生成兼容XP的可执行程序 good（从VS2012 update1开始支持xp和c++11）
一.直接使用VS2012/VS2013/VS2015生成XP兼容的可执行程序 Visual Studio刚发布时没打补丁,称为RTM版,之后会陆续发布补丁,进行bug修复和功能增强.VS2010及之前 ...
- linux后台查看共享内存和消息队列的命令
ipcs ipcs -q : 显示所有的消息队列 ipcs -qt : 显示消息队列的创建时间,发送和接收最后一条消息的时间 ipcs -qp: 显示往消息队列中放消息和从消息队列中取消息的进程ID ...
- 简单的js菜单
<!DOCTYPE html> <html> <head> <title>hovertree</title><base target= ...
- Android下读取logcat的信息
有时我们需要在程序执行进程中遇到一些异常,需要收集一logcat的信息,android下就可以使用以下方法获取: private static String getLogcatInfo(){ Stri ...