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 ...
随机推荐
- MySQL Cluster搭建与测试
MySQL Cluster是一个基于NDB Cluster存储引擎的完整的分布式数据库系统.不仅仅具有高可用性,而且可以自动切分数据,冗余数据等高级功能.和Oracle Real Cluster Ap ...
- Spring中Bean的作用域
1.在Spring的早期版本中,仅有两个作用域:singleton和prototype,前者表示Bean以单例的方式存在:后者表示每次从容器中调用Bean时,都会返回一个新的实例 2.Spring 2 ...
- sql例子
select * from plat_material_resource where stl_url LIKE '/data1/upload%' --截取字符串 UPDATE plat_materia ...
- Unity学习疑问记录之保卫伦敦塔学习体会
1.生成的prefab如果要产生反向: Instantiate(Rocket, rocketPosition.position, Quaternion.Euler(new Vector3(0,0,18 ...
- IOS网络第五天 AFN-02-文件上传，底部弹出窗体，拍照和相册获取图片上传
************** #import "HMViewController.h" #import "AFNetworking.h" @interface ...
- html和css的联系
前几天学习了一点html,今天团队为做项目一起学习时,又了解到了新的东西———css,通过组内队员的指导和对一些网站(三翼)的分析,发现了html和css之间联系密切.根据从网上了解的资料,发现htm ...
- SQL Server 2008 R2数据库镜像部署
概述 “数据库镜像”是一种针对数据库高可用性的基于软件的解决方案.其维护着一个数据库的两个相同的副本,这两个副本分别放置在不同的SQL Server数据库实例中.建议使用不同位置的两台服务器来承载.在 ...
- Azure Active Directory Connect密码同步问题
这几天一直在弄O365与本地域账号的密码同步问题.由于微软即将用Azure Active Directory Connect(以下简称AADC)这个同步工具替代之前的DirSync,所以我也研究了下这 ...
- mysql 创建索引和删除索引
索引的创建可以在CREATE TABLE语句中进行,也可以单独用CREATE INDEX或ALTER TABLE来给表增加索引.删除索引可以利用ALTER TABLE或DROP INDEX语句来实现. ...
- JMeter学习-022-JMeter 分布式测试（性能测试大并发、远程启动解决方案）
在使用 JMeter 进行性能测试时,难免遇到要求并发请求数比较的场景,此时单台测试机的配置(CPU.内存.带宽等)可能无法支持此性能测试场景.因而,此时 JMeter 提供的分布式测试功能就有了用武 ...