码迷,mamicode.com
首页 > 其他好文 > 详细

table点击一行显示下一行的特效

时间:2014-06-26 22:22:06      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   code   java   http   

 

效果体验:http://sandbox.runjs.cn/show/rw4vq8zo

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.bordertable {width:100%;border-collapse: collapse;color: #707070;background: #fff; border: 1px solid #bcbcbc;border-right:0}
.bordertable td{border-right:1px #ccc solid; border-bottom:1px #ccc solid; text-align:center;padding:12px 0;font-size:14px;color:#333333}

.a_c{color:#720a05}
.content td{ text-align:center;padding:10px 0;font-size:12px;color:#414141}
a { color:#000; text-decoration:none}
#j_content{ }
.j_showtr td { background:#0FF;}
.j_showtr { display:none;width:100%;}
.j_showtr_content { overflow:hidden;height:35px;width:100%}
.j_showtr_content ul{margin:0;width:100%}
.j_showtr_content ul li{float:left;width:14%; list-style:none;}
.a_yangshi{background:url(../images/shaixuan.png) right center no-repeat; text-align:left; color:#707070; padding:0 12px 0 0; margin:0 auto}
a:hover{ text-decoration:underline;}
</style>
</head>

<body>

<table cellspacing="0" cellpadding="0" class="content bordertable" id="tab_BB">
        <tbody>
        <tr class="danhao td_bc_l" zz-id="19-38" zz-go="">
            <td width="4%">02</td>
            <td width="8%"><a href="#">19-38</a></td>
            <td width="5%">三十一部</td>
            <td width="7%">设计师</td>
            <td width="12%" title="行行新嘻嘻">行行新嘻嘻</td>
            <td width="4%">办公</td>
            <td width="5%"> 80</td>
            <td width="9%">2014-03-18</td>
            <td width="5%">0</td>
            <td width="4%"> 0</td>
            <td width="4%"> 0</td>
            <td width="5%">0</td>
            <td width="4%"> 0</td>
            <td width="4%">0</td>
            <td>行行新嘻嘻行行新嘻嘻行行 </td>
        </tr>
         <tr class="j_showtr" style="display:none;">
            <td colspan="15">
                <div class="j_showtr_content">
                    
                        <ul class="thetop" style="overflow:hidden;">
                            <li class="active"><a class="ico1" href="javascript:">回访添加</a></li>
                            <li><a class="ico2" href="javascript:">填写合同</a></li>
                            <li><a class="ico3" href="javascript:">客户预付</a></li>
                            <li><a class="ico3" href="javascript:">设计已签</a></li>
                            <li><a class="ico4" href="javascript:">施工已签</a></li> 
                            <li><a class="ico4" href="javascript:">提交未签</a></li> 
                        </ul>
                  
                  
                </div>
            </td>
          
        </tr>
        <tr class="danhao " zz-id="19-38" zz-go="">
            <td width="4%">02</td>
            <td width="8%"><a href="#">19-38</a></td>
            <td width="5%">三十二部</td>
            <td width="7%">设计师</td>
            <td width="12%" title="行行新嘻嘻">行行新嘻嘻</td>
            <td width="4%">办公</td>
            <td width="5%"> 80</td>
            <td width="9%">2014-03-18</td>
            <td width="5%">0</td>
            <td width="4%"> 0</td>
            <td width="4%"> 0</td>
            <td width="5%">0</td>
            <td width="4%"> 0</td>
            <td width="4%">0</td>
            <td>行行新嘻嘻行行新嘻嘻行行 </td>
        </tr>
        <tr class="j_showtr" style="display:none;">
            <td colspan="15">
                <div class="j_showtr_content">
                    
                        <ul class="thetop">
                            <li class="active"><a class="ico1" href="javascript:">回访添加</a></li>
                            <li><a class="ico2" href="javascript:">填写合同</a></li>
                            <li><a class="ico3" href="javascript:">客户预付</a></li>
                            <li><a class="ico3" href="javascript:">设计已签</a></li>
                            <li><a class="ico4" href="javascript:">施工已签</a></li> 
                            <li><a class="ico4" href="javascript:">提交未签</a></li> 
                        </ul>
                  
                  
                </div>
            </td>
        </tr>
          <tr class="danhao td_bc_l" zz-id="19-38" zz-go="">
            <td width="4%">02</td>
            <td width="8%"><a href="#">19-38</a></td>
            <td width="5%">三十三部</td>
            <td width="7%">设计师</td>
            <td width="12%" title="行行新嘻嘻">行行新嘻嘻</td>
            <td width="4%">办公</td>
            <td width="5%"> 80</td>
            <td width="9%">2014-03-18</td>
            <td width="5%">0</td>
            <td width="4%"> 0</td>
            <td width="4%"> 0</td>
            <td width="5%">0</td>
            <td width="4%"> 0</td>
            <td width="4%">0</td>
            <td>行行新嘻嘻行行新嘻嘻行行 </td>
        </tr>
         <tr class="j_showtr" style="display: none;">
            <td colspan="15">
                <div class="j_showtr_content">
                    
                        <ul class="thetop">
                            <li class="active"><a class="ico1" href="javascript:">回访添加</a></li>
                            <li><a class="ico2" href="javascript:">填写合同</a></li>
                            <li><a class="ico3" href="javascript:">客户预付</a></li>
                            <li><a class="ico3" href="javascript:">设计已签</a></li>
                            <li><a class="ico4" href="javascript:">施工已签</a></li> 
                            <li><a class="ico4" href="javascript:">提交未签</a></li> 
                        </ul>
                 
                  
                </div>
            </td>
        </tr>
        <tr class="danhao" zz-id="19-38" zz-go="">
            <td width="4%">02</td>
            <td width="8%"><a href="#">19-38</a></td>
            <td width="5%">三十四部</td>
            <td width="7%">设计师</td>
            <td width="12%" title="行行新嘻嘻">行行新嘻嘻</td>
            <td width="4%">办公</td>
            <td width="5%"> 80</td>
            <td width="9%">2014-03-18</td>
            <td width="5%">0</td>
            <td width="4%"> 0</td>
            <td width="4%"> 0</td>
            <td width="5%">0</td>
            <td width="4%"> 0</td>
            <td width="4%">0</td>
            <td>行行新嘻嘻行行新嘻嘻行行 </td>
        </tr>
        <tr class="j_showtr" style="display: none;">
            <td colspan="15">
                <div class="j_showtr_content">
               
                       <ul class="thetop">
                            <li class="active"><a class="ico1" href="javascript:">回访添加</a></li>
                            <li><a class="ico2" href="javascript:">填写合同</a></li>
                            <li><a class="ico3" href="javascript:">客户预付</a></li>
                            <li><a class="ico3" href="javascript:">设计已签</a></li>
                            <li><a class="ico4" href="javascript:">施工已签</a></li> 
                            <li><a class="ico4" href="javascript:">提交未签</a></li> 
                        </ul>
               
                
                </div>
            </td>
        </tr>
         <tr class="danhao td_bc_l" zz-id="19-38" zz-go="">
            <td width="4%">02</td>
            <td width="8%"><a href="#">19-38</a></td>
            <td width="5%">三十一部</td>
            <td width="7%">设计师</td>
            <td width="12%" title="行行新嘻嘻">行行新嘻嘻</td>
            <td width="4%">办公</td>
            <td width="5%"> 80</td>
            <td width="9%">2014-03-18</td>
            <td width="5%">0</td>
            <td width="4%"> 0</td>
            <td width="4%"> 0</td>
            <td width="5%">0</td>
            <td width="4%"> 0</td>
            <td width="4%">0</td>
            <td>行行新嘻嘻行行新嘻嘻行行 </td>
        </tr>
        <tr class="j_showtr" style="display: none;">
            <td colspan="15">
                <div class="j_showtr_content">
                  
                        <ul class="thetop">
                            <li class="active"><a class="ico1" href="javascript:">回访添加</a></li>
                            <li><a class="ico2" href="javascript:">填写合同</a></li>
                            <li><a class="ico3" href="javascript:">客户预付</a></li>
                            <li><a class="ico3" href="javascript:">设计已签</a></li>
                            <li><a class="ico4" href="javascript:">施工已签</a></li> 
                            <li><a class="ico4" href="javascript:">提交未签</a></li> 
                        </ul>
              
                </div>
            </td>
        </tr>
        
        
    </tbody></table>
    <script src="图片轮播/jquery-xImage/jquery-1.10.2.min.js"> 
    </script>
    <script>
    $(function(){
        $(".danhao").click(function(){
            if(!$(this).next().attr("data-thream")){
                $(.j_showtr).css("display","none").removeAttr("data-thream");
                $(this).next().css("display","table-row").attr("data-thream","1");    
            }
            else{
                $(this).next().css("display","none").removeAttr("data-thream");
            }
        })
    });
    </script>
</body>
</html>

 

table点击一行显示下一行的特效,布布扣,bubuko.com

table点击一行显示下一行的特效

标签:style   class   blog   code   java   http   

原文地址:http://www.cnblogs.com/wanliyuan/p/3807921.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!