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>
table点击一行显示下一行的特效的更多相关文章
- python在指定一行的下一行插入文本
给定一个程序,程序中有许多函数,比如,funcA,funcB,现在,如何在生成的函数中插入一个logger()语句? 这里用一个solidity程序做例子 pragma solidity ^0.4.0 ...
- js 点击按钮显示下拉菜单
<li> <a id = "rank" onclick="showGroup()"></a></li><l ...
- linux下在某行的前一行或后一行添加内容
linux的sed工具是十分强大的,能很容易的实现在某关键词的前一行或后一行增加内容.今天在批量修改tomcat的日志时就用到了该功能. 一.在某行的前一行或后一行添加内容 具休操作如下: #匹配行前 ...
- 解决TextView在显示文字的时候，一行还没显示满就跳到下一行
转载请注明:转自 http://blog.csdn.NET/u011176685/article/details/48295185 一.问题描述: Android的TextView在显示文字的时候,如 ...
- IOS7 UITableView一行滑动删除后 被删除行的下一行的点击事件将被忽略解决办法
- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSI ...
- ie6 ie7下，Li不能自动换行，出现竖排文字现象（PS：li不固定宽度，所有li同一行显示），在ie8却可以
好久没写CSS,今天又发现一个ie兼容问题. 我需要所有的li在同一行显示,不固定Li的宽度,如果一行排不下,需要自动换行.当然Li的内容长度不同. 必须在li加white-space:nowrap; ...
- CSS一行显示，显示不下的用省略号显示
CSS一行显示,显示不下的用省略号显示 .abc{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 复制上面代码即可 ...
- 利用jquery给指定的table动态添加一行、删除一行
转自:http://www.cnblogs.com/linjiqin/p/3148181.html $("#mytable tr").find("td:nth-child ...
- 利用jquery给指定的table动态添加一行、删除一行，复制，值不重复等操作
$("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列$("#mytable tr").f ...
随机推荐
- PostgreSQL+PostGIS的使用 函数清单
一. PostgreSQL与PostGIS的关系 PostgreSQL 是世界上技术最先进的开源数据库,其前身是1977年一个源于Berkeley名为Ingres的非关系型数据库,其项目领导人为Mic ...
- 隐藏和显示效果js动画
<div id='ctt' style='margin-left: 50px; color: white'> <input type="button ...
- 归档 NSKeyedArchiver
复杂对象无法象 NSString,NSArray等简单对象一样直接通过 writeToFile 实现持久化,当对复杂对象进行持久化时需要将其转化为 NSData (归档),但获取数据时,将 NSDat ...
- Samba出现“您可能没有权限使用网络资源”解决方法
我最近在Centos6.3上搭建Samba系统,按照配置都已经配置好了,当就是没法在win7下访问,老是弹出以下弹出框: 后来我在网上找资料发现有SELinux这么个东西,然后我就按照配置该了一下就成 ...
- 2013 Multi-University Training Contest 4 Who's Aunt Zhang
看题就知道要用polya,但是当时没做出来,还是不是很熟悉polya!!! 总共有24种置换: 1. 不做任何旋转 K ^ (54 + 12 + 8) 2. 绕相对面中心的轴转 1) 90度 K ^ ...
- uploadify 下载组件使用技巧和在线预览 word,excel,ppt,pdf的方案
http://www.cnblogs.com/wolf-sun/p/3565184.html uploadify 上传工具的使用技巧 http://www.cnblogs.com/wolf-sun/p ...
- Servlet课程0426（十二）Servlet MV模式下用户登录及查看用户表中所有用户
Welcome.java //登录界面 package com.tsinghua; import javax.servlet.http.*; import java.io.*; import java ...
- IOS - DatePicker的使用
UIDatePicker *picker = [[UIDatePicker alloc] init]; picker.datePickerMode = UIDatePickerModeDate; pi ...
- Hibernate逍遥游记-第2章-使用hibernate.properties
1. package mypack; import org.hibernate.*; import org.hibernate.cfg.Configuration; import java.util. ...
- 你只是看起来很努力（只是做了一遍真题，草草的对了一遍答案，然后冲出自习室继续她学生会的事情了，骗自己更容易）good——想起了自己在六大时候的无奈
(转)你只是看起来很努力一次上课,一个女孩子垂头丧气的跟我说,老师,我考了四次四级,还没过,究竟是为什么. 我说,你真题做了吗?单词背了吗?她拿出已经翻破了的真题,跟我说,你讲的所有的题目我连答案都记 ...