JQuery相关的效果

<!DOCTYPE html>
< html>
< head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.12.2.min.js"></script>                      //还要有个jquery-1.12.2.min.js文件。
< /head>
< body>
使用jquery实现下面的表格样式效果:
< ol>
    <li>给表格加上边框,同时表格宽度800,内容居中</li>
    <li>表格第一行文字加粗,背景色darkgreen</li>
    <li>表格从第二行开始,奇数行和偶数行颜色要求不同</li>
    <li>鼠标移动到表格中,除了第一行以外都有提示颜色,同时出现手型效果</li>
    <li>点击某个内容行,可以把该行内容弹出显示</li>
< /ol>


< table>
    <tr>
        <th>序号</th><th>姓名</th><th>性别</th><th>电话</th><th>地址</th><th>备注</th>
    </tr>
    <tr>
        <td>1</td><td>小李</td><td>女</td><td>13312345678</td><td>四川省成都市</td><td>没</td>
    </tr>
    <tr>
        <td>2</td><td>小陈</td><td>女</td><td>13012345678</td><td>四川省成都市</td><td>无</td>
    </tr>
    <tr>
        <td>3</td><td>张三</td><td>男</td><td>15312345678</td><td>四川省绵阳市</td><td>没啥</td>
    </tr>
    <tr>
        <td>4</td><td>李四</td><td>男</td><td>14312345678</td><td>四川省德阳市</td><td>没啥</td>
    </tr>
    <tr>
        <td>5</td><td>王五</td><td>女</td><td>18312345678</td><td>四川省成都市武侯区</td><td>没啥</td>
    </tr>
    <tr>
        <td>6</td><td>小张</td><td>男</td><td>13912345678</td><td>四川省成都市</td><td>没啥</td>
    </tr>
    <tr>
        <td>7</td><td>赵六</td><td>男</td><td>13812345678</td><td>四川省成都市</td><td>没啥</td>
    </tr>
< /table>
< br/>
< script>
    $(function(){
        $("table").css({"border":"1px solid gray","width":"800px","text-align":"center",
            "border-collapse":"collapse"});
        $("table td,table th").css("border","1px solid gray");
        $("table tr:first").css("background-color","darkgreen");
        $("table tr:not(:first):even").css("background-color","blanchedalmond").hover(
                function(){
                    $(this).css("background-color","orange");
                },
                function(){
                    $(this).css("background-color","blanchedalmond");
                }
        );
        $("table tr:not(:first):odd").css("background-color","burlywood").hover(
                function(){
                    $(this).css("background-color","orange");
                },
                function(){
                    $(this).css("background-color","burlywood");
                }
        );;
        $("table tr:not(:first)").css("cursor","pointer").click(function(){
            var info="";
            var firsttds=$("table tr:first th");
            $(this).children("td").each(function(i){
                info+=firsttds.eq(i).html()+":"+this.innerHTML+",";
            });
            alert(info);
        });
    });
< /script>
< /body>
< /html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值