好几次遇到的问题，都是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. 如何签名apk，并让baidu地图正常显示

    1.选中项目,右击export Next直到完成,这样就生成了my.keystore文件 将my.keystore拷到C:\Users\Administrator\.android 利用jdk的工具生 ...

  2. EXTJS 3.0 资料 控件之 itemselector 用法

    var dsform = new Ext.data.ArrayStore({ data: [[123, 'One Hundred Twenty Three'], ['1', '今天星期一'], ['2 ...

  3. 【BZOJ 2730】 [HNOI2012]矿场搭建

    Description 煤矿工地可以看成是由隧道连接挖煤点组成的无向图.为安全起见,希望在工地发生事故时所有挖煤点的工人都能有一条出路逃到救援出口处.于是矿主决定在某些挖煤点设立救援出口,使得无论哪一 ...

  4. H2嵌入式数据库的各种连接方式

    H2database是一款用java语言编写的开源数据库, 一般用作游戏的数据存储, 当然web项目也是可以用的, web项目也可以将该数据库 首先要安装H2数据库 http://www.h2data ...

  5. hdu 4717 The Moving Points（第一个三分题）

    http://acm.hdu.edu.cn/showproblem.php?pid=4717 [题意]: 给N个点,给出N个点的方向和移动速度,求每个时刻N个点中任意两点的最大值中的最小值,以及取最小 ...

  6. TCP/IP协议原理学习笔记

    昨天学习了杨宁老师的TCP/IP协议原理第一讲和第二讲,主要介绍了OSI模型,整理如下: OSI是open system innerconnection的简称,即开放式系统互联参考模型,它把网络协议从 ...

  7. Object-C单元测试&MOCK（摘录精选）

    断言测试类型: 下面一共18个断言(SDK中也是18个,其含义转自ios UnitTest 学习笔记,真心佩服原文的博主): XCTFail(format…) 生成一个失败的测试: XCTAssert ...

  8. 4.0 spring-注册解析的Bean

    1.0 registerBeanDefinition 对于配置文件,解析也解析完了,装饰也装饰完了,对于得到的BeanDefinition已经可以满足后续的使用了,唯一剩下的工作就是注册了, 也就是: ...

  9. 用in判断input中的placeholder属性是否在这个对象里

    <input id="test"> var ele = document.getElementById("test"); if("plac ...

  10. LA 4731

    dp[i][j]意思是前i个分成j组最小的花费 #include<cstdio> #include<algorithm> #include<cstring> #in ...