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 ...
随机推荐
- mac上xampp配置
sudo su /Applications/XAMPP/xamppfiles/xampp security
- Redhat 显示系统版本号和内核版本号
1./etc/issue 和 /etc/redhat-release都是系统安装时默认的发行版本信息,通常安装好系统后文件内容不会发生变化.[root@rac1 mysql]# cat /etc/is ...
- IOS game
App Store真是个金矿,即使是红海一片,黑马也依旧不少,前有愤怒的小鸟,现在出了个Flappy Bird,虽然是去年推出的,但最近爆红App Store和Google Play,越南河内的独立游 ...
- 【Spring-boot多数据库】Spring-boot JDBC with multiple DataSources sample
application.properties spring.ds_items.driverClassName=org.postgresql.Driver spring.ds_items.url=jdb ...
- kruskal算法-Pascal
马上就快要考试了,然而突然发现自己图论已经废了,于是再都打一遍练练手...... const maxn=; maxe=maxn*maxn; type edge=record //edge记录每一条边, ...
- 基于SuperSocket实现的WebSocket（后端）
关于WebSocket其实很早就想发了,奈何之前项目中的WebSocket的后端不是我做的,而我又想前后端都发出来和大家讨论讨论~于是挤出点时间研究了一下WebSocket的后端实现(所以才有了这篇文 ...
- Mac环境下装node.js,npm,express;(包括express command not found)
1. 下载node.js for Mac 地址: http://nodejs.org/download/ 直接下载 pkg的,双击安装,一路点next,很容易就搞定了. 安装完会提醒注意 node和n ...
- PHP 5.3连接sql server 2008 R2
我的机器为: xp sp3 sql server 2008 developer apache 2.2.2 php 5.3 从5.3开始,php就不再提供mssql.dll了,所以要php连接sql ...
- sort-based shuffle的核心：org.apache.spark.util.collection.ExternalSorter
依据Spark 1.4版 在哪里会用到它 ExternalSorter是Spark的sort形式的shuffle实现的关键.SortShuffleWriter使用它,把RDD分区中的数据写入文件. o ...
- 线索二叉树Threaded binary tree
摘要 按照某种遍历方式对二叉树进行遍历,可以把二叉树中所有结点排序为一个线性序列.在该序列中,除第一个结点外每个结点有且仅有一个直接前驱结点:除最后一个结点外每一个结点有且仅有一个直接后继结点.这 ...