正文
table点击一行显示下一行的特效
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
效果体验：http://sandbox.runjs.cn/show/rw4vq8zo
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.bordertable {width:%;border-collapse: collapse;color: #;background: #fff; border: 1px solid #bcbcbc;border-right:}
.bordertable td{border-right:1px #ccc solid; border-bottom:1px #ccc solid; text-align:center;padding:12px ;font-size:14px;color:#}.a_c{color:#720a05}
.content td{ text-align:center;padding:10px ;font-size:12px;color:#}
a { color:#; text-decoration:none}
#j_content{ }
.j_showtr td { background:#0FF;}
.j_showtr { display:none;width:%;}
.j_showtr_content { overflow:hidden;height:35px;width:%}
.j_showtr_content ul{margin:;width:%}
.j_showtr_content ul li{float:left;width:%; list-style:none;}
.a_yangshi{background:url(../images/shaixuan.png) right center no-repeat; text-align:left; color:#; padding: 12px ; margin: auto}
a:hover{ text-decoration:underline;}
</style>
</head><body><table cellspacing="" cellpadding="" class="content bordertable" id="tab_BB">
<tbody>
<tr class="danhao td_bc_l" zz-id="19-38" zz-go="">
<td width="4%"></td>
<td width="8%"><a href="#">-</a></td>
<td width="5%">三十一部</td>
<td width="7%">设计师</td>
<td width="12%" title="行行新嘻嘻">行行新嘻嘻</td>
<td width="4%">办公</td>
<td width="5%"> </td>
<td width="9%">--</td>
<td width="5%"></td>
<td width="4%"> </td>
<td width="4%"> </td>
<td width="5%"></td>
<td width="4%"> </td>
<td width="4%"></td>
<td>行行新嘻嘻行行新嘻嘻行行 </td>
</tr>
<tr class="j_showtr" style="display:none;">
<td colspan="">
<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%"></td>
<td width="8%"><a href="#">-</a></td>
<td width="5%">三十二部</td>
<td width="7%">设计师</td>
<td width="12%" title="行行新嘻嘻">行行新嘻嘻</td>
<td width="4%">办公</td>
<td width="5%"> </td>
<td width="9%">--</td>
<td width="5%"></td>
<td width="4%"> </td>
<td width="4%"> </td>
<td width="5%"></td>
<td width="4%"> </td>
<td width="4%"></td>
<td>行行新嘻嘻行行新嘻嘻行行 </td>
</tr>
<tr class="j_showtr" style="display:none;">
<td colspan="">
<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%"></td>
<td width="8%"><a href="#">-</a></td>
<td width="5%">三十三部</td>
<td width="7%">设计师</td>
<td width="12%" title="行行新嘻嘻">行行新嘻嘻</td>
<td width="4%">办公</td>
<td width="5%"> </td>
<td width="9%">--</td>
<td width="5%"></td>
<td width="4%"> </td>
<td width="4%"> </td>
<td width="5%"></td>
<td width="4%"> </td>
<td width="4%"></td>
<td>行行新嘻嘻行行新嘻嘻行行 </td>
</tr>
<tr class="j_showtr" style="display: none;">
<td colspan="">
<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%"></td>
<td width="8%"><a href="#">-</a></td>
<td width="5%">三十四部</td>
<td width="7%">设计师</td>
<td width="12%" title="行行新嘻嘻">行行新嘻嘻</td>
<td width="4%">办公</td>
<td width="5%"> </td>
<td width="9%">--</td>
<td width="5%"></td>
<td width="4%"> </td>
<td width="4%"> </td>
<td width="5%"></td>
<td width="4%"> </td>
<td width="4%"></td>
<td>行行新嘻嘻行行新嘻嘻行行 </td>
</tr>
<tr class="j_showtr" style="display: none;">
<td colspan="">
<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%"></td>
<td width="8%"><a href="#">-</a></td>
<td width="5%">三十一部</td>
<td width="7%">设计师</td>
<td width="12%" title="行行新嘻嘻">行行新嘻嘻</td>
<td width="4%">办公</td>
<td width="5%"> </td>
<td width="9%">--</td>
<td width="5%"></td>
<td width="4%"> </td>
<td width="4%"> </td>
<td width="5%"></td>
<td width="4%"> </td>
<td width="4%"></td>
<td>行行新嘻嘻行行新嘻嘻行行 </td>
</tr>
<tr class="j_showtr" style="display: none;">
<td colspan="">
<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","");
}
else{
$(this).next().css("display","none").removeAttr("data-thream");
}
})
});
</script>
</body>
</html>
