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

<!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>

赞 (0)

相关推荐

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

    <!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-

  • JS实现列表页面隔行变色效果

    JS实现列表页面隔行变色效果

    先看看隔行变色效果: 代码: <head runat="server"> <title></title> <script type="text/javascript"> window.onload = function () { var otab = document.getElementById('tab1'); var thiscolor = ''; for (var i = 0; i < otab.tBod

  • JavaScript实现表格快速变色效果代码

    JavaScript实现表格快速变色效果代码

    本文实例讲述了JavaScript实现表格快速变色效果的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript实现一个极酷的表格特效,表格快速的变色,形成色彩炫丽的效果,第一眼看上去,甚至不像是表格.读者可以通过本代码来研究一下Js的相关特性,了解一些JS编程技巧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-fast-cha-color-codes/ 具体代码如下: <HTML> <HEAD>

  • js实现鼠标经过表格行变色的方法

    本文实例讲述了js实现鼠标经过表格行变色的方法.分享给大家供大家参考.具体实现方法如下: <script type=text/javascript> <!-- (function(){ var rows = document.getElementById("listdata"); var add = function(){ this.style.backgroundColor="#f3f3f1"; }; var del = function(){

  • JS组件Bootstrap Table表格多行拖拽效果实现代码

    JS组件Bootstrap Table表格多行拖拽效果实现代码

    前言:前天刚写了篇JS组件Bootstrap Table表格行拖拽效果,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.用了半天时间研究了下,效果是出来了,但是感觉不尽如人意.先把它分享出来,以后想到更好的办法再优化吧. 一.效果展示 1.拖动前 2.拖动中 3.拖动后 4.撤销回到拖动前状态 二.需求分析 通过上篇我们知道,如果要实现拖拽,必须要有一个可以拖拽的标签,或者叫容器,比如上篇里面的tr就是一个拖拽的容器,那么如果要实现选择行的拖拽,那么博主的第一反应是将选中的

  • js兼容火狐显示上传图片预览效果的方法

    js兼容火狐显示上传图片预览效果的方法

    本文实例讲述了js兼容火狐显示上传图片预览效果的方法.分享给大家供大家参考.具体实现方法如下: <!doctype html> <html> <head> <meta content="text/html; charset=GBK" http-equiv="Content-Type" /> <title>Image preview example</title> <style type=&

  • jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例

    jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例

    本文实例讲述了jQuery实现可兼容IE6的淡入淡出效果告警提示功能.分享给大家供大家参考,具体如下: 其实我觉得告警提示的话,直接用一个Alert就最好的.开门见山,直接让用户明白你当前系统的意思,关键是Alert这东西就是再破的浏览器都必须兼容,不然你它丫的做毛浏览器啊?但是,在现在越来越觉得Alert不美观,而且开始有"弹窗挺吓人"的思潮,因此,告警提示你必须做得好看一点.在Javascript的透明度的操控比较艰难的前提下,jQuery的简单淡入淡出效果是你的选择.之所以选择j

  • JS兼容所有浏览器的DOMContentLoaded事件

    使用JavaScript操作dom元素的时候,通常会将获取dom元素的代码放在window.onload=function(){}事件处理函数中,但window.onload事件在某些开始后可能会影响客户体验,因为要等待所有的脚本,css代码和图片等内容加载完毕才会触发此事件,尤其是如果图片量很大的情况下,会严重客户体验.所以很多时候,只需要DOM结构加载完毕即可,jQuery的$(document).ready(function(){})实现此功能,下面介绍一下原生JavaScript如何实现

  • JavaScript实现九宫格点击变色效果

    JavaScript实现九宫格点击变色效果

    本文实例为大家分享了JavaScript实现九宫格点击变色效果的具体代码,供大家参考,具体内容如下 完成九宫格布局,实现点击任意格子之后改变该格子自身背景颜色. 首先使用表格完成九宫格框架: <table> <tr > <td></td> <td></td> <td></td> </tr> <tr > <td></td> <td></td>

  • JS实现状态栏跑马灯文字效果代码

    JS实现状态栏跑马灯文字效果代码

    本文实例讲述了JS实现状态栏跑马灯文字效果代码.分享给大家供大家参考,具体如下: 这款状态栏跑马灯,文字跑动的定义在数组内,自己可修改内容.现在的IE8貌似不兼容,有缺憾的代码,欢迎JS爱好者修正,修正请发回一份.状态栏为效果显示区. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ztlpmd-txt-style-codes/ 具体代码如下: <HTML> <HEAD> <TITLE>间隔状态栏跑马灯</T

随机推荐