好几次遇到的问题，都是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. hdu 4622 Reincarnation SAM模板题

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4622 题意:给定一个长度不超过2000的字符串,之后有Q次区间查询(Q <= 10000),问区 ...

  2. 图像处理-07-图像的轮廓提取-Robert算子

    图像的轮廓提取-Robert算子 图像的边缘:周围像素灰度有阶跃变化或“屋顶”变化的那些像素的集合,边缘广泛存在于物体与背景之间.物体与物体之间,基元与基元之间,是图像分割的重要依据. 物体的边缘是由 ...

  3. PHP - PDO 之 mysql 参数绑定

    <?php /* pdo 学习 */ $dsn = 'mysql:host=localhost;dbname=cswl';//构建连接dsn $db = new pdo($dsn,'root', ...

  4. ios播放声音中断后台音乐的问题

      今天遇到一个ios播放声音中断后台音乐的问题,在我的app中如果调用AVAudioSession 播放完声音,后台的qq音乐偶尔不能恢复,而网易云音乐一次都不能恢复播放,研究了一下AVAudioS ...

  5. python学习笔记29（python中堆的使用）

    堆(heap):优先队列的一种,使用优先队列能够以任意顺序增加对象,并且能在任意时间(可能在增加对象的同时)找到(也可能是移除)最小元素,比用于列表中min的方法要高效. Python中并没有独立的堆 ...

  6. Contest2037 - CSU Monthly 2013 Oct (problem F ：ZZY and his little friends)

    http://acm.csu.edu.cn/OnlineJudge/problem.php?cid=2037&pid=5 [题解]: 没想通这题暴力可以过.... [code]: #inclu ...

  7. Ext4.2 grid 条件查询使用

    项目中用到Ext4.2,初次接触,用的不是太熟,做个总结,恳请指正! 1.grid重新设置条件,查询结果不是从第1页开始 在处理grid条件查询时,点击搜索按钮调用store.load()方法时,会把 ...

  8. window live writer的曲折安装过程

           之前一直使用windows live writer2012写日志,由于之前重装了系统,所以需要重新安装writer,本以为是一个很简单的过程,你就是安装个软件吗.... 然而事实是... ...

  9. SQL的集合运算符介绍

    最近学习了SQL SERVER方面的知识,毕竟做Web应用,少不了跟数据库打交道.学习的来源主要是<程序员的SQL金典>这本书. 今天介绍数据库里面的集合运算符,它是指匹配集合的每一个结果 ...

  10. 无法为请求的 Configuration 对象创建配置文件 错误原因

    Configuration config = WebConfigurationManager.OpenWebConfiguration("~"); 无法为请求的 Configura ...