好几次遇到的问题，都是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. 【BZOJ 2744 】[HEOI2012]朋友圈

    Description 在很久很久以前,曾经有两个国家和睦相处,无忧无虑的生活着.一年一度的评比大会开始了,作为和平的两国,一个朋友圈数量最多的永远都是最值得他人的尊敬,所以现在就是需要你求朋友圈的最 ...

  2. bnuoj 1053 EASY Problem (计算几何)

    http://www.bnuoj.com/bnuoj/problem_show.php?pid=1053 [题意]:基本上就是求直线与圆的交点坐标 [题解]:这种题我都比较喜欢用二分,三分做,果然可以 ...

  3. 小啃机器学习（1）-----ID3和C4.5决策树

    第一部分:简介 ID3和C4.5算法都是被Quinlan提出的,用于分类模型,也被叫做决策树.我们给一组数据,每一行数据都含有相同的结构,包含了一系列的attribute/value对. 其中一个属性 ...

  4. 《Head First HTML&CSS》笔记

    void元素是指HTML页面中开始标记和结束标记之间没有任何内容的元素. 应当使用相对链接来链接同一网站中的页面,而用URL来链接其他网站上的页面. 浏览器读取计算机本地文件时会使用file协议.文件 ...

  5. Xcode 向6.0以后版本添加iOS开发空白模板

    打开finder,找到应用程序,找到xcode 右键显示包内容.按照如下目录进行查找:Contents ▸ Developer ▸ Platforms ▸ iPhoneOS.platform ▸ De ...

  6. flex toolTip样式设置

        需要3个文件.一个是样式类,一个样式文件,一个是mxml文件. ●MyToolTip.as package{ import mx.core.UITextField; import mx.ski ...

  7. scala学习-类与对象

    类 / 对象 [<快学Scala>笔记] 一.类 1.Scala中的类是公有可见性的,且多个类可以包含在同一个源文件中: class Counter{ private var value ...

  8. 数据聚合 & 分组：新一代系统监控的核心功能

    遥想 2015 年 8 月 17 日,Cloud Insight 还在梳理功能原型,畅想 Cloud Insight 存在的意义:为什么阿里云用户需要使用 Cloud Insight 来加强管理. 而 ...

  9. 其实，前面倒腾那么多，只是为了想玩SPRING BOOT

    嘿嘿,,曲线达到.. 看来看来很多国内的速成,都不爽. 官方教程最体贴~~~:) http://docs.spring.io/spring-boot/docs/current/reference/ht ...

  10. Javascript学习笔记(一)

    1.form表单中button按钮的事件会导致表单的提交,可以改成<input type='button'  /> 实现 2. 手动触发select的onchange事件 var sele ...