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 相关文章推荐
新闻内页-JS分页
Jun 07 Javascript
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
javascript alert乱码的解决方法
Nov 05 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
纯前端JavaScript实现Excel IO案例分享
Aug 26 Javascript
js实现三级联动效果(简单易懂)
Mar 27 Javascript
JS实现数组去重方法总结(六种方法)
Jul 14 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
Apr 26 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
用PHP4访问Oracle815
2006/10/09 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
javascript里的条件判断
2007/02/27 Javascript
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
JS 实现图片直接下载示例代码
2013/07/22 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
jQuery滚动条插件nanoscroller使用指南
2015/04/21 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
Vue 同步异步存值取值实现案例
2020/08/05 Javascript
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
python类中super() 的使用解析
2019/12/19 Python
Pytorch中实现只导入部分模型参数的方式
2020/01/02 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
python自定义函数def的应用详解
2020/06/03 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
Python实现播放和录制声音的功能
2020/08/12 Python
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
芬兰灯具网上商店:Nettilamppu.fi
2018/06/30 全球购物
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
高中政治教学反思
2014/01/18 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
2014年教研组工作总结
2014/11/26 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
2015入党自传书范文
2015/06/26 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
企业财务管理制度范本
2015/08/04 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
pycharm代码删除恢复的方法
2021/06/26 Python