效果体验：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点击一行显示下一行的特效的更多相关文章

  1. python在指定一行的下一行插入文本

    给定一个程序,程序中有许多函数,比如,funcA,funcB,现在,如何在生成的函数中插入一个logger()语句? 这里用一个solidity程序做例子 pragma solidity ^0.4.0 ...

  2. js 点击按钮显示下拉菜单

    <li> <a id = "rank" onclick="showGroup()"></a></li><l ...

  3. linux下在某行的前一行或后一行添加内容

    linux的sed工具是十分强大的,能很容易的实现在某关键词的前一行或后一行增加内容.今天在批量修改tomcat的日志时就用到了该功能. 一.在某行的前一行或后一行添加内容 具休操作如下: #匹配行前 ...

  4. 解决TextView在显示文字的时候，一行还没显示满就跳到下一行

    转载请注明:转自 http://blog.csdn.NET/u011176685/article/details/48295185 一.问题描述: Android的TextView在显示文字的时候,如 ...

  5. IOS7 UITableView一行滑动删除后 被删除行的下一行的点击事件将被忽略解决办法

    - (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSI ...

  6. ie6 ie7下，Li不能自动换行，出现竖排文字现象（PS：li不固定宽度，所有li同一行显示），在ie8却可以

    好久没写CSS,今天又发现一个ie兼容问题. 我需要所有的li在同一行显示,不固定Li的宽度,如果一行排不下,需要自动换行.当然Li的内容长度不同. 必须在li加white-space:nowrap; ...

  7. CSS一行显示，显示不下的用省略号显示

    CSS一行显示,显示不下的用省略号显示 .abc{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 复制上面代码即可 ...

  8. 利用jquery给指定的table动态添加一行、删除一行

    转自:http://www.cnblogs.com/linjiqin/p/3148181.html $("#mytable tr").find("td:nth-child ...

  9. 利用jquery给指定的table动态添加一行、删除一行，复制，值不重复等操作

    $("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列$("#mytable tr").f ...

随机推荐

  1. matlab之点运算基本思想及几何平移变换

    1.对数变换可以增强图像中较暗部分的细节,因为对数可以将较小的值放大,而较大的值缩小 2.伽马变换:y = (x + esp) ^ γ,x,y的取值范围是0到1,esp是补偿系数,γ为伽马系数.γ的不 ...

  2. Nested Loop,Sort Merge Join,Hash Join

    三种连接工作方式比较: Nested loops 工作方式是从一张表中读取数据,访问另一张表(通常是索引)来做匹配,nested loops适用的场合是当一个关联表比较小的时候,效率会更高. Merg ...

  3. 使用plspl创建orcale作业

    1.由于权限问题,第一步应先以sys账户登录,路径:工具->DBMS 调试程序->作业  ,新建一个作业,出现如下图的窗口 2.开始依次填写相应内容,Name为作业名字,注意要加上用户名前 ...

  4. Create CSS3 Buttons Compatible with All Browsers

    Create CSS3 Buttons Compatible with All Browsers http://www.ourtuts.com/create-css3-buttons-compatib ...

  5. git/ TortoiseGit 在bitbucket.org 使用证书登陆

    背景:使用https协议在bitbucket中进行pull,push 时每次都要输入密码,比较麻烦还耽误时间,在网上找了下保存密码的方式 使用在用户环境变量中配置_netrc 文件的方式(http:/ ...

  6. 使用Yeoman搭建 AngularJS 应用 (11) —— 让我们搭建一个网页应用

    原文地址:http://yeoman.io/codelab/prepare-production.html 让我们发布这个应用 优化产品的文件 为了创建应用的产品版本,我们想做如下的事情 检查你的代码 ...

  7. Spring 注解 @Resource和@Autowired（转）

    鸣谢:http://my.oschina.net/u/216467/blog/205951 @Resource和@Autowired两者都是做bean的注入使用. 其实@Resource并不是Spri ...

  8. JavaScript里最有效率的功能特征检测方法

    代码执行效率对于程序员和程序来说都是至关重要的,尤其是遇到了那些需要大量调用.反复调用的函数方法.在很多Javascript框架里你都能看到有反复调用的函数.当在使用这些框架时,我们必须小心翼翼的尽量 ...

  9. 在MAC下调试运行暗黑全世界客户端及部分代码注解（基于Firefly）

    原地址:http://www.myexception.cn/program/1399860.html 在MAC下调试运行暗黑全世界客户端及部分代码注解(基于Firefly) 在MAC下调试运行暗黑世界 ...

  10. Unity3D 自动打包整个项目（以AssetBundle实现）

    原地址:http://blog.csdn.net/huang7jiao/article/details/18370653 需求: 在移动开发中,手动控制资源的加载.释放和热更新,是很有必要的. 而Un ...