js兼容标准的表格变色效果


Posted in Javascript onJune 28, 2008

<!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" />
<style type="text/css">
* { margin:0; padding:0; font-size:14px }
body { text-align:center;}
#btn { list-style:none inside; width:210px; margin:10px auto; clear:both; }
#btn li { float:left; width:100px; line-height:20px }
#btn li a{ display:block; text-decoration:none; color:#333333}
#gray { background:#f5f5f5; cursor: pointer }
#green { background:#D7ECDE; cursor:pointer }
table { border-collapse:collapse; width:70%; margin:10px auto }
td { line-height:100%; height:24px; line-height:24px; padding:0 4px }
td a { text-decoration:none; color:#333; display:block; }
#tab_gray td { border:1px solid #B9B9B9; background: #F2F2F2; }
#tab_green td { border:1px solid #95CCA7; background:#EBF5EE; }
#tab_gray td:hover, #tab_green td:hover { background:#fff; }
</style>
</head>
<body>
<ul id="btn">
    <li id="gray"><a href="javascript:void()" onclick="gray()">gray</a></li>
    <li id="green"><a href="javascript:void()" onclick="green()">green</a></li>
</ul>
<table id="tab_gray">
    <tr>
        <td><a href="#">Table</a></td>
        <td><a href="#">Table</a></td>
        <td><a href="#">Table</a></td>
    </tr>
    <tr>
        <td>hello</td>
        <td>hello</td>
        <td>hello</td>
    </tr>
    <tr>
        <td>hello</td>
        <td>hello</td>
        <td>hello</td>
    </tr>
</table>
<script language="javascript">
function green(){
document.getElementById("tab_gray").id="tab_green";
}
function gray(){
document.getElementById("tab_green").id="tab_gray";
}
</script>
</body>
</html>

Javascript 相关文章推荐
javascript下查找父节点的简单方法
Aug 13 Javascript
让浏览器非阻塞加载javascript的几种方法小结
Apr 25 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
Jun 27 Javascript
关于URL中的特殊符号使用介绍
Nov 03 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
Nov 07 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
javascript实现微信分享
Dec 23 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
Apr 01 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 Javascript
了解ESlint和其相关操作小结
May 21 Javascript
js查找父节点的简单方法
Jun 28 #Javascript
一个小型js框架myJSFrame附API使用帮助
Jun 28 #Javascript
JavaScript 给汉字排序实例代码
Jun 28 #Javascript
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 #Javascript
JS解密入门 最终变量劫持
Jun 25 #Javascript
JS解密入门之凭直觉解
Jun 25 #Javascript
js异或加解密效果代码
Jun 25 #Javascript
You might like
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
全国FM电台频率大全 - 25 云南省
2020/03/11 无线电
PHP中STDCLASS用法实例分析
2016/11/11 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
thinkPHP5.1框架路由::get、post请求简单用法示例
2019/05/06 PHP
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
Ubuntu 11.10 安装Node.js的方法
2011/11/30 Javascript
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
React实现全选功能
2020/08/25 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
在Python中调用ggplot的三种方法
2015/04/08 Python
Python中的异常处理简明介绍
2015/04/13 Python
Python中类型关系和继承关系实例详解
2015/05/25 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
Python如何实现的二分查找算法
2020/05/27 Python
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
医院护士专业个人的求职信
2013/12/09 职场文书
集团公司总经理岗位职责
2013/12/20 职场文书
金融管理应届生求职信
2014/02/20 职场文书
《学会待客》教学反思
2014/02/22 职场文书
品牌宣传方案
2014/03/21 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
理发店策划方案
2014/06/05 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
2014年督导工作总结
2014/11/19 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
秋季运动会加油词
2015/07/18 职场文书
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android