2 zengyunhua1992 zengyunhua1992 于 2016.09.13 22:33 提问

使用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个回答

qq_29594393
qq_29594393   Ds   Rxr 2016.09.13 22: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>
caozhy
caozhy 正解
大约一年之前 回复
zhuzige521888
zhuzige521888   2016.09.13 23: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'); }); });
zhuzige521888
zhuzige521888   2016.09.13 23: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');
});
});
Csdn user default icon
上传中...
上传图片
插入图片