好几次遇到的问题，都是table中tr后面有一部分内容要显示，也是用tr装的，但是需要点击该行，后面那个tr才显示出来。不过最好不要用toggle去写，因为着实效果不佳。故而建议换一种方式，也许最简单的js才是最有效的。

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>

<title>jquery toggle 显示与隐藏表格行_http://www.jbxue.com</title>

<script src="仿淘宝/js/jquery-1.10.2.min.js"></script>

<style type="text/css">

.hidden{

display:none;

}

.button{

cursor:hand;

}

</style>

</head>

<body>

<h3>表格行的显示与隐藏（点击第一行或第二行出现内容）</h3>

<table>

    <tr class="button" id="tr_1"><td>第一行</td></tr>

    <tr id="tabtr_1" class="hidden"><td>1111111111脚本学堂，是专业的脚本编程，网站编程，系统管理，服务器管理，软件教程，硬件教程等技术站点。欢迎大家的光临。</td></tr>

    <tr class="button" id="tr_2"><td>第二行</td></tr>

    <tr id="tabtr_2" class="hidden"><td>2222222222脚本学堂，是专业的脚本编程，网站编程，系统管理，服务器管理，软件教程，硬件教程等技术站点。欢迎大家的光临。</td></tr>

</table/> 

</body>

</html>

<script type="text/javascript">

    $(function(){

        $(".button").click(function(){

            if(!$('#tab'+this.id).hasClass("hidden")){

                $('#tab'+this.id).addClass('hidden');

            }

            else{

                $('tr[id^=tab]').addClass('hidden');

                $('#tab'+this.id).removeClass('hidden');

            }

        });

    });

</script>

table中tr使用toggle不好，选择换一张方式的更多相关文章

  1. js的传值，table中tr的遍历，js中动态创建数组

    1.这里关键是对页面中的传值,其次是动态的创建一个数组,用来存值 $(val).css("background-color", "rgb(251, 248, 233)&q ...

  2. javascript闭包获取table中tr的索引 分类： JavaScript 2015-05-04 15:10 793人阅读 评论(0) 收藏

    使用javascript闭包获取table标签中tr的索引 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  3. table中tr间距的设定table合并单元格 colspan（跨列）和rowspan（跨行）

    table中的tr的默认display:table-row,虽然可以修改为display:block但是就失去了tr特有的显示效果,如(td自动对齐): 并且在tr中对起设定padding是有用的,可 ...

  4. table中tr或者td的点击事件

    直接把时间添加到table或者tbody上,只有下面的tr或者td才能促发事件,通过e.target可以获得当前点击tr或者td,这样就可以进行查询或者删除操作了 如果是删除,直接e.target.r ...

  5. js操作table中tr的顺序，实现上移下移一行的效果

    总体思路是在table外部加个div,修改div的innerHtml实现改变tr顺序的效果 具体思路是 获取当前要移动tr行的rowIndex,在table中删除掉,然后循环table的rows,到了 ...

  6. 如何设置table中<tr>和<td>的高度

    //-----------------自定义表格table的行和列的宽和高----------------------// 先设置一个样式 如下: <style type="text/ ...

  7. table中tr的display属性在火狐中显示不正常，IE中显示正常

    最近在作项目的时候碰到一个问题,就是需要AJAX来交互显示<tr> </tr> 标签内的东西,按照常理,对于某一单元行需要显示时,使用:display:block属性,不需要显 ...

  8. 取消table中tr td的边距

    <table border="0" cellspacing="0" cellpadding="0">

  9. 在table中tr的display:block在firefox下显示布局错乱问题

    [转自:] http://blog.csdn.net/sd2131512/article/details/4720345 按照常理,对于某一单元行需要显示时,使用:display:block属性,不需 ...

随机推荐

  1. Win32的绘图消息大集合

    AbortPath 抛弃选入指定设备场景中的所有路径.也取消目前正在进行的任何路径的创建工作AngleArc 用一个连接弧画一条线Arc 画一个圆弧BeginPath 启动一个路径分支CancelDC ...

  2. iOS 开发一年总结

    收获很多 1. 一个人包办从构思, 设计, 实现, 推广的全过程, 对自己的能力, 特别是能力范围有很大的提升. 以前在公司上班仅仅局限在实现的局域内, 现在在做自己的产品时, 在设计时的取舍, 对工 ...

  3. Head First设计模式悟道

    暂时包括 策略模式,观察者,装饰模式,工厂模式,抽象工厂模式,后续会继续补充中,纯属个人总结用,不喜勿喷, 源代码见: 传送门 public class NYPizzaIngredientFactor ...

  4. 慎用ReentrantLock

    前言: 代码简洁与性能高效无法两全其美,本文章专注于并发程序的性能,如果您追求代码简洁,本文章可能不太适合,本文章属于Java Concurrency in Practice读书笔记. 在java5中 ...

  5. 1588: [HNOI2002]营业额统计 - BZOJ

    Description营业额统计 Tiger最近被公司升任为营业部经理,他上任后接受公司交给的第一项任务便是统计并分析公司成立以来的营业情况. Tiger拿出了公司的账本,账本上记录了公司成立以来每天 ...

  6. spring中注解事务认识

    1.配置事务管理器 <!-- 设定transactionManager事务管理器 --> <bean id="txManager" class="org ...

  7. Side by Side Assembly介绍--manifest文件的使用

    什么是Side-by-Side Assembly? Side-by-Side Assembly(建称SxS)是微软在Visual Studio 2005(Windows 2000?)中引入的技术,用来 ...

  8. 1961-计算机基础知识大赛 2 (new)

    描述 求A^B的最后三位数表示的整数(1<=A,B<=10000) 输入 A B 输出 A^B的最后三位数 样例输入 2 3 12 6 样例输出 8 984 #include<ios ...

  9. 【BZOJ 2300】 2300: [HAOI2011]防线修建 （动态凸包+set）

    2300: [HAOI2011]防线修建 Description 近来A国和B国的矛盾激化,为了预防不测,A国准备修建一条长长的防线,当然修建防线的话,肯定要把需要保护的城市修在防线内部了.可是A国上 ...

  10. mac 用 brew

    mac 下用   brew 安装插件, 有重复的不会再次安装,比xmap模式好