实现表格隔行/点击换色效果

来源：互联网发布：js轮播图片自适应代码编辑：程序博客网时间：2024/05/16 03:25
<!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>实现表格隔行/点击换色效果</title>    <script src="jquery-2.1.0.js"></script>    <!--    题意：    创建一个表格，实现各行换色功能：    光标在表格上移动，当前行变色；离开当前行，颜色恢复；点击按钮，鼠标左键按下，颜色改变，抬起，颜色恢复 -->    <style type="text/css">        .body_div{ width:366px;            height:388px;            font-size: 16px;            background-color: #CCCCCC;        }        /*.tr_odd {        background-color: orange;        }        .tr_even{        background-color: aqua;        } */        .mouse_color{            background-color: green;        }        .mousedown_mouseup_color{            background-color:red;        }        #tab{            border: 1px #FF0000 solid;            text-align: center;            width: 100%;            height: 100%;        }    </style>    <script type="text/javascript">        $(function(){            /* //设置奇数行背景色             $("#tab tr:odd").addClass("tr_odd");             //设置偶数行背景色             $("#tab tr:even").addClass("tr_even");             */// 鼠标移到行的颜色:光标在表格上移动，当前行变色；( mousemove或mouseover )            $("#tab tr").mousemove(function(){                $(this).addClass("mouse_color");            });// 鼠标移出行的颜色:离开当前行，颜色恢复            $("#tab tr").mouseout(function(){                $(this).removeClass("mouse_color");            });// 鼠标按下所在列的颜色:鼠标左键按下，颜色改变            $("#tr td").mousedown(function(){                $(this).addClass("mousedown_mouseup_color");            });// 鼠标抬起所在列的颜色:鼠标左键抬起，颜色恢复            $("#tr td").mouseup(function(){                $(this).removeClass("mousedown_mouseup_color");            });        });    </script></head><body><center>    <div class="body_div">        <table id="tab" border="1" cellspacing="0" cellpadding="1" align="center" >            <tr id="tr" bgcolor="#999999" style="font-weight:bolder; font-size:23px;">                <td>姓名</td>                <td>年龄</td>                <td>性别</td>            </tr>            <tr id="tr" bgcolor="#0066FF">                <td>张三</td>                <td>20</td>                <td>男</td>            </tr>            <tr id="tr" bgcolor="#FFCC00">                <td>李四</td>                <td>21</td>                <td>女</td>            </tr>            <tr id="tr" bgcolor="#CC33FF">                <td>王五</td>                <td>22</td>                <td>男</td>            </tr>            <tr id="tr" bgcolor="#00FF99">                <td>赵六</td>                <td>23</td>                <td>女</td>            </tr>        </table>    </div></center></body></html>
阅读全文
0 0