- 浏览: 388484 次
- 性别:
- 来自: 青岛
博客专栏
-
wordpress步步高
浏览量:74329
-
Web前端开发之路
浏览量:90468
-
Flex/ActionSc...
浏览量:62284
-
Android/IOS 开...
浏览量:34509
-
PHP项目实战
浏览量:23848
文章分类
最新评论
-
u013810758:
editplus
个人觉得 SublimeText 目前最好用的 文本编辑器 -
u010189889:
poll.zip (13.7 KB) 这个文件是干什么的?
手把手做一个PHP 投票系统 -
freerambo:
不错 赞一个
完美的 登录注册框 含漂亮的过渡、转换效果 -
uule:
不错不错,楼主好屌
国外经典JS、Jquery 各种资源集合 -
zyl324:
真心不错,学习了
用jquery都弱爆了 纯css 实现焦点图的 动态绚丽效果
<!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=utf-8" /> <title>Welcome to Tablecloth</title> <!-- paste this code into your webpage --> <link href="tablecloth/tablecloth.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="tablecloth/tablecloth.js"></script> <!-- end --> <style> body{ margin:0; padding:0; background:#f1f1f1; font:70% Arial, Helvetica, sans-serif; color:#555; line-height:150%; text-align:left; } a{ text-decoration:none; color:#057fac; } a:hover{ text-decoration:none; color:#999; } h1{ font-size:140%; margin:0 20px; line-height:80px; } h2{ font-size:120%; } #container{ margin:0 auto; width:680px; background:#fff; padding-bottom:20px; } #content{margin:0 20px;} p.sig{ margin:0 auto; width:680px; padding:1em 0; } form{ margin:1em 0; padding:.2em 20px; background:#eee; } </style> </head> <body> <div id="container"> <div id="content"> <table cellspacing="0" cellpadding="0"> <tr> <th>Title</th> <th>Title</th> <th>Title</th> <th>Title</th> </tr> <tr> <td>Data</td> <td>Data</td> <td> </td> <td>Data</td> </tr> <tr> <td>Data</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </table> </div> </div> </body> </html>
table, td{ font:100% Arial, Helvetica, sans-serif; } table{width:100%;border-collapse:collapse;margin:1em 0;} th, td{text-align:left;padding:.5em;border:1px solid #fff;} th{background:#328aa4 url(tr_back.gif) repeat-x;color:#fff;} td{background:#e5f1f4;} /* tablecloth styles */ tr.even td{background:#e5f1f4;} tr.odd td{background:#f8fbfc;} th.over, tr.even th.over, tr.odd th.over{background:#4a98af;} th.down, tr.even th.down, tr.odd th.down{background:#bce774;} th.selected, tr.even th.selected, tr.odd th.selected{} td.over, tr.even td.over, tr.odd td.over{background:#ecfbd4;} td.down, tr.even td.down, tr.odd td.down{background:#bce774;color:#fff;} td.selected, tr.even td.selected, tr.odd td.selected{background:#bce774;color:#555;} /* use this if you want to apply different styleing to empty table cells*/ td.empty, tr.odd td.empty, tr.even td.empty{background:#fff;}
this.tablecloth = function(){ var highlightCols = false; var highlightRows = true; var selectable = true; this.clickAction = function(obj){ //alert(obj.innerHTML); }; // END CONFIG (do not edit below this line) var tableover = false; this.start = function(){ var tables = document.getElementsByTagName("table"); for (var i=0;i<tables.length;i++){ tables[i].onmouseover = function(){tableover = true}; tables[i].onmouseout = function(){tableover = false}; rows(tables[i]); }; }; this.rows = function(table){ var css = ""; var tr = table.getElementsByTagName("tr"); for (var i=0;i<tr.length;i++){ css = (css == "odd") ? "even" : "odd"; tr[i].className = css; var arr = new Array(); for(var j=0;j<tr[i].childNodes.length;j++){ if(tr[i].childNodes[j].nodeType == 1) arr.push(tr[i].childNodes[j]); }; for (var j=0;j<arr.length;j++){ arr[j].row = i; arr[j].col = j; if(arr[j].innerHTML == " " || arr[j].innerHTML == "") arr[j].className += " empty"; arr[j].css = arr[j].className; arr[j].onmouseover = function(){ over(table,this,this.row,this.col); }; arr[j].onmouseout = function(){ out(table,this,this.row,this.col); }; arr[j].onmousedown = function(){ down(table,this,this.row,this.col); }; arr[j].onmouseup = function(){ up(table,this,this.row,this.col); }; arr[j].onclick = function(){ click(table,this,this.row,this.col); }; }; }; }; // appyling mouseover state for objects (th or td) this.over = function(table,obj,row,col){ if (!highlightCols && !highlightRows) obj.className = obj.css + " over"; if(check1(obj,col)){ if(highlightCols) highlightCol(table,obj,col); if(highlightRows) highlightRow(table,obj,row); }; }; // appyling mouseout state for objects (th or td) this.out = function(table,obj,row,col){ if (!highlightCols && !highlightRows) obj.className = obj.css; unhighlightCol(table,col); unhighlightRow(table,row); }; // appyling mousedown state for objects (th or td) this.down = function(table,obj,row,col){ obj.className = obj.css + " down"; }; // appyling mouseup state for objects (th or td) this.up = function(table,obj,row,col){ obj.className = obj.css + " over"; }; // onclick event for objects (th or td) this.click = function(table,obj,row,col){ if(check1){ if(selectable) { unselect(table); if(highlightCols) highlightCol(table,obj,col,true); if(highlightRows) highlightRow(table,obj,row,true); document.onclick = unselectAll; } }; clickAction(obj); }; this.highlightCol = function(table,active,col,sel){ var css = (typeof(sel) != "undefined") ? "selected" : "over"; var tr = table.getElementsByTagName("tr"); for (var i=0;i<tr.length;i++){ var arr = new Array(); for(j=0;j<tr[i].childNodes.length;j++){ if(tr[i].childNodes[j].nodeType == 1) arr.push(tr[i].childNodes[j]); }; var obj = arr[col]; if (check2(active,obj) && check3(obj)) obj.className = obj.css + " " + css; }; }; this.unhighlightCol = function(table,col){ var tr = table.getElementsByTagName("tr"); for (var i=0;i<tr.length;i++){ var arr = new Array(); for(j=0;j<tr[i].childNodes.length;j++){ if(tr[i].childNodes[j].nodeType == 1) arr.push(tr[i].childNodes[j]) }; var obj = arr[col]; if(check3(obj)) obj.className = obj.css; }; }; this.highlightRow = function(table,active,row,sel){ var css = (typeof(sel) != "undefined") ? "selected" : "over"; var tr = table.getElementsByTagName("tr")[row]; for (var i=0;i<tr.childNodes.length;i++){ var obj = tr.childNodes[i]; if (check2(active,obj) && check3(obj)) obj.className = obj.css + " " + css; }; }; this.unhighlightRow = function(table,row){ var tr = table.getElementsByTagName("tr")[row]; for (var i=0;i<tr.childNodes.length;i++){ var obj = tr.childNodes[i]; if(check3(obj)) obj.className = obj.css; }; }; this.unselect = function(table){ tr = table.getElementsByTagName("tr") for (var i=0;i<tr.length;i++){ for (var j=0;j<tr[i].childNodes.length;j++){ var obj = tr[i].childNodes[j]; if(obj.className) obj.className = obj.className.replace("selected",""); }; }; }; this.unselectAll = function(){ if(!tableover){ tables = document.getElementsByTagName("table"); for (var i=0;i<tables.length;i++){ unselect(tables[i]) }; }; }; this.check1 = function(obj,col){ return (!(col == 0 && obj.className.indexOf("empty") != -1)); } this.check2 = function(active,obj){ return (!(active.tagName == "TH" && obj.tagName == "TH")); }; this.check3 = function(obj){ return (obj.className) ? (obj.className.indexOf("selected") == -1) : true; }; start(); }; /* script initiates on page load. */ window.onload = tablecloth;
评论
4 楼
guangqiang
2012-02-01
jellyfish 写道
thanks, working now.
npz cheers gang!
3 楼
jellyfish
2012-01-31
thanks, working now.
2 楼
guangqiang
2012-01-31
jellyfish 写道
where is tablecloth/tablecloth.css?
pls check it again ....
1 楼
jellyfish
2012-01-30
where is tablecloth/tablecloth.css?
发表评论
-
CSS3 background 分别设置多个背景图片【博主推荐】
2013-06-27 15:14 4871CSS3允许给box/div元素设置多个背景图片,只需要在 ... -
一款基于bootstrap的datetimepicker
2013-05-29 15:49 1677<!DOCTYPE HTML> < ... -
php/js/jquery等各种语言版本—检测终端类型和浏览器类型
2013-05-29 15:45 928<?php if ( (strpos( ... -
博文转移到个人网站,欢迎大家访问!!!
2013-05-13 22:40 1454http://ismartstudio.com 欢迎 ... -
推荐一款神器,桌面远程调试IOS网站的工具 很好很强大 支持国产!
2013-04-04 11:09 2418MIHTool 是前端工程师在 ... -
绚丽的图片文字 跟随过渡切换焦点图设计
2013-03-25 14:00 1439<!DOCTYPE html> &l ... -
看一眼你就会爱上它 10种不同风格任你选
2013-03-22 09:25 1335看一眼你就会爱上它 10种不同风格任你选 .vi ... -
用jquery都弱爆了 纯css 实现焦点图的 动态绚丽效果
2013-03-15 15:19 3738先看大图 <!DOCTYPE ht ... -
圆形的hover效果 多种style可供选择见demo
2013-03-15 14:45 1922当鼠标浮动时 会呈现圆形的富有生动的多重样式的动态效果 ... -
图片hover状态平滑划过过渡效果
2013-03-15 14:38 2185附源码 //first preload ... -
纯css 应用使得网站各个模块切换 平滑过渡
2013-03-15 14:26 1861首先创建一个百分百的 layout 然后创建各个panel ... -
页面滑到底端弹出提示表单
2013-03-05 10:51 1271<p id="last" ... -
一款漂亮的滑动表单
2013-03-05 10:46 1863<h1>Fancy Sliding Form ... -
php版本 化妆程序 给图片添加饰物
2013-03-05 10:20 1591大家估计都用手机玩过 化妆整人的程序 也就是对照片加工处 ... -
完美的 登录注册框 含漂亮的过渡、转换效果
2013-03-04 17:29 3321<div id="cont ... -
大气磅礴的网站效果 scroll+easing+animation+水平、竖直滚动
2013-03-04 11:07 2901像酒店 酒吧 咖啡店连锁 小型餐厅 音乐网站等等 都可以采 ... -
jquery实现 购物车 信息 级联改变
2013-01-29 15:07 1988<!DOCTYPE html PUBLIC &quo ... -
LESS 一种流行的新式的动态样式语言
2013-03-01 10:36 1098简介: LESS 是动态的样式表语言,通过简 ... -
发现一款很酷的jquery 相片墙翻牌效果
2013-01-16 16:10 4319可用于 企业网站中的 赞助商、 合作伙伴、 公司 ... -
用css或jquery方式 使div 水平、竖直均居中
2013-01-16 11:43 1933.className{ width:270 ...
相关推荐
devexpress表格控件gridcontrol设置隔行变色、焦点行颜色、设置(改变)显示值、固定列不移动(附源码)
一个大表每一行下面需要加一行空行,怎么加最方便 Excel中插入空白行 快速删除工作表中的空行快速删除空行一次删完Excel里面多出很多的空白行 每30行为一页并加上一个标题如何实现如何实现隔行都加上标题项 如何把...
只需要在绘图工具栏上选择文本框(竖排或横排均可),然后在表格上拖出一个文本框,在其中输入文字,再在表格上单击鼠标右键,在弹出菜单中选择“设置文本框格式”,再单击“颜色与线条”标签,把“填充”颜色及“线条...
9.9.3 设置可同时选中多行表格 183 9.9.4 可拖动的表格 184 9.9.5 设置单元格的图标 184 9.9.6 改变选中行高亮显示的颜色 185 9.9.7 带有上下文菜单的表格 186 9.9.8 可编辑的表格(TableEditor) 187 ...
一个大表每一行下面需要加一行空行,怎么加最方便 Excel中插入空白行 快速删除工作表中的空行快速删除空行一次删完Excel里面多出很多的空白行 每30行为一页并加上一个标题如何实现如何实现隔行都加上标题项 如何把...
选中D1单元格,用鼠标指向单元格右下角的小方块“■”,当光标变成"+"后,按住鼠标拖动光标向下拖到要合并的结尾行处,就完成了B列和C列的合并。这时先不要忙着把B列和C列删除,先要把D列的结果复制一下,再用...
2.3.6 颜色设置 .............................................................................................................................18 2.3.7 移动侦测 ............................................
实例071 选中单选按钮后显示其他表单元素 116 实例072 通过单选按钮控制其他表单元素是否可用 117 2.4 复选框 117 实例073 不提交表单获取复选框的值 118 实例074 控制复选框的全选或反选 118 实例075 只有一个复选...
“在库中的对应命令名”请务必准确填写静态库中公开导出的符号名称(C函数(cdecl)编译后,符号名称通常是在函数名称前加下划线(_));“在库中的对应命令名”以@开头表示以cdecl方式调用,否则表示以默认的stdcall...
设置自动保存时间间隔: 工具/选项/保存选项卡 设置打开文件密码: 文件/另存为,工具/安全措施选项 三、保存文档 计算机培训教程全文共62页,当前为第13页。 四、编辑文档 插入、撤销、恢复 复制、剪切、删除、...
采用电子表格的方式对图元属性进编辑,与excel、acsses能够直接互相复制、粘贴,并且能够实现图形联动、属性联动等操作。 22、属性提取功能。输入属性提取条件,能够将点、线、区中符合条件的图元提取到新的文件中...
实例169 设置窗体背景颜色为淡蓝色 221 实例170 设置窗体背景为指定图片 222 实例171 使背景图片自动适应窗体的大小 223 实例172 使背景图片在窗体中居中显示 224 实例173 使背景图片在窗体中平铺显示 225 实例174 ...
2 <br>0003 设置程序代码行序号 3 <br>0004 开发环境全屏显示 3 <br>0005 设置窗口的自动隐藏功能 3 <br>0006 根据需要创建所需解决方案 4 <br>0007 如何使用“验证的目标架构”功能 4 ...