yy兽哥
2016-09-13 14:33
采纳率: 89.4%
浏览 1.3k
已采纳

使用jquery制作动态斑马条纹表格 请我该怎样实现

使用jQuery完成一个动态的斑马条纹表格:加载后奇数行底色为红色,当鼠标进入表格时奇数行去掉底色,换成偶数行底色为红色,鼠标离开时候回复到原始状态。(提示:toggleClass)
<br> $(&quot;#one thead&quot;).css(&quot;background&quot;,&quot;blue&quot;);<br> $(&quot;#one tbody tr:odd&quot;).css(&quot;background&quot;,&quot;red&quot;);<br>
已实现部分效果,后边是用toggleClass好呢 还是用mouseover显示隐藏好图片说明

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • 当作看不见 2016-09-13 14:57
    已采纳

    。。。

     <script type="text/javascript">
        $(function(){
            $("#one tr:even").addClass("red")
            $("#one tr:first").css("background-color","blue")
            $("#one").hover(function(){
                $("#one tr").toggleClass("red")
                $("#one tr:first").css("background-color","blue")
            })
        })
    </script>
    <style type="text/css">
        .red{
            background-color: red;
        }
    </style>
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • 一个程序猿子 2016-09-13 15:24

    1.jQuery实现表格斑马条
    html部分:












    …………//重复行
         
         

    css部分:
    table{ border: 1px solid purple; border-collapse:collapse;}
    td{ border:1px solid purple;}
    js部分:
    $(function(){
    $("tr:nth-child(3n)").css("background","#B8C2D0");
    $("tr:nth-child(3n+1)").css("background","skyblue");
    $("tr:nth-child(3n+2)").css("background","blue");
    });
    效果图:
    jQuery实现表格斑马条及高亮显示
    1. jQuery实现表格行的高亮显示 css部分和html部分同上,只需修改js部分,js代码如下: $(function(){ $("tr:even").css('background',"skyblue"); $("tr").bind('mouseover',function(){ $(this).css('background','#ff9900'); }); $('tr:even').bind('mouseout',function(){ $(this).css('background','skyblue'); }); $('tr:odd').bind('mouseout',function(){ $(this).css('background','#ffffff'); }); });
    评论
    解决 无用
    打赏 举报
  • 一个程序猿子 2016-09-13 15:26
        1.jQuery实现表格斑马条
        html部分:
     <table width="500" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
            …………//重复行
        </table>
        css部分:
        table{ border: 1px solid purple; border-collapse:collapse;}
        td{ border:1px solid purple;}
        js部分:
        $(function(){
        $("tr:nth-child(3n)").css("background","#B8C2D0");
        $("tr:nth-child(3n+1)").css("background","skyblue");
        $("tr:nth-child(3n+2)").css("background","blue");
        });
    
    2. jQuery实现表格行的高亮显示
    css部分和html部分同上,只需修改js部分,js代码如下:
    $(function(){
    $("tr:even").css('background',"skyblue");
    $("tr").bind('mouseover',function(){
    $(this).css('background','#ff9900');
    });
    $('tr:even').bind('mouseout',function(){
    $(this).css('background','skyblue');
    });
    $('tr:odd').bind('mouseout',function(){
    $(this).css('background','#ffffff');
    });
    });
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题