好几次遇到的问题，都是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. Android中获取应用程序(包)的信息-----PackageManager的使用(一)

    本节内容是如何获取Android系统中应用程序的信息,主要包括packagename.label.icon.占用大小等.具体分为两个 部分,计划如下:  第一部分: 获取应用程序的packagenam ...

  2. 论Oracle字符集“转码”过程

    本文将通过实验来演示一下Oracle字符集“转码”的确认过程. 1.实验环境说明 客户端是Windows XP操作系统的SQL*Plus程序,客户端字符集是936(对应Oracle的ZHS16GBK字 ...

  3. Get the item a SharePoint workflow task is associated with

    This is handy. SharePoint helpfully populates the meta data with the GUID of the list and the ID of  ...

  4. sql之表的表达式

    1.派生表 实质:就是特殊的子查询(将查询结果放在from后面) 含有一张Order表: 看下面的sql语句: select orderid,orderdate,custid from ( selec ...

  5. [转]oracle10.2.0.1下载链接

    记录一下ORACLE 10gR2的软件下载地址,备用. 下载OTN上的这些软件,你需要一个OTN免费帐号,不过如果通过迅雷进行下载,就不用登陆OTN了: Oracle Database 10g Rel ...

  6. WdatePicker 设置开始时间和结束时间

    开始时间: <input type="text" placeholder=" -请选择- " readonly="readonly" ...

  7. bnuoj 29373 Key Logger（模拟双向队列）

    http://www.bnuoj.com/bnuoj/problem_show.php?pid=29373 [题意]:模拟光标输入 [题解]:用双向列表模拟实现,这里用其他模拟会超时,注意内存的释放 ...

  8. maven 编译部署src/main/java下的资源文件

    maven 编译部署src/main/java下的资源文件 maven默认会把src/main/resources下的所有配置文件以及src/main/java下的所有java文件打包或发布到targ ...

  9. 用 OneAPM Cloud Insight 监控 Docker 性能

    Docker 是构建和部署软件的一个新兴的轻量级的平台,也是一个减轻替代虚拟机的容器.Docker 通过给开发者提供兼容不同环境的镜像,成为解决现代基础设施的持续交付的一个流行的解决方案. 和虚拟机一 ...

  10. C++智能指针(auto_ptr)详解

    智能指针(auto_ptr) 这个名字听起来很酷是不是?其实auto_ptr 只是C++标准库提供的一个类模板,它与传统的new/delete控制内存相比有一定优势,但也有其局限.本文总结的8个问题足 ...