需求：用JQuery实现，点击最上边的粗加号时，对所有含有子表的Tr进行展开，点击 + 号时，只对当前Tr的下一个tr内容的动态隐藏和显示；

问题：JQuery的slideToggle() slideUp() slideDown()是不支持在表格的tr上使用滑动效果的，所以不能通过 $(TrDom).slideToggle()来实现滑动

解决方法：把子Table包裹到一个Div中，然后通过 $(divDom).slideToggle()来实现滑动效果，需要注意的是，如果子表在页面加载时需要隐藏的话，那么就需要把tr所在的div设置为display:none,所以后面实现子表的滑动效果时还需要考虑所在tr的显示问题，解决方法是，对每个子表所对应的Tr也使用Toggle方法，以保持两者开关状态的一致性。

Table中采用JQuery slideToggle效果的问题的更多相关文章

  1. iview的table中Tooltip的使用

    这篇文章主要介绍了iview-admin中在table中使用Tooltip提示效果. 1. table中文字溢出隐藏,提示气泡展示所有信息 jLongText(item){ item.render = ...

  2. Jquery Ajax 异步设置Table中某列的值

    可根据table中某列中的ID去改变某列的值! 只是参考,实际应用中不能这样做的,如果有很多行,频繁访问服务器,服务器是顶不住的! JS: $(document).ready(function () ...

  3. bootstrap中table页面做省市区级联效果(级联库见前面级联编辑)(非select下拉框)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. jQuery中的渐变动画效果

    jQuery中的渐变动画效果jQuery中的渐变动画效果

  5. jQuery 在Table中选择input之类的东西注意事项

    jQuery 在Table中选择input之类的东西注意事项: 如果不在td标签中,是不能进行正确选择的: <table id="tblFormId"> <tr& ...

  6. jQuery遍历table中的tr td并获取td中的值

    jQuery遍历table中的tr td并获取td中的值 $(function(){ $("#tableId tr").find("td").each(func ...

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

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

  8. jquery 在 table 中修改某行值

    修改 table 中某行的的方法步骤如下: 1.选择要修改的行,事件触发,比如我的 双击某行时修改 2.将要修改的行,替换为input,原先的列中的值,需要放到对应的input中作为默认值 3.修改完 ...

  9. 第86节：Java中的JQuery基础

    第86节:Java中的JQuery 前言复习 定时器: setInterval clearInterval setTimeout clearTimeout 显示: img.style.display ...

随机推荐

  1. 【TMF eTOM】业务流程框架介绍

    TMF文档版权信息 Copyright © TeleManagement Forum 2013. All Rights Reserved. This document and translations ...

  2. ADO.Net事务处理

    SQL Server中的事务可以将多个数据库增删改查操作合并为单个工作单元,在操作过程中任何部分出错都可以滚回已经执行的所有更改.ADO.Net中也提供了事务处理功能,通过ADO.net事务,可以将多 ...

  3. C#将PDF转换为图片的方法

    1.需要添加引用  O2S.Components.PDFRender4NET 链接: https://pan.baidu.com/s/1ZPTaLTnFkex6QrsndLjwxg 提取码: jdh2 ...

  4. Ajax.BeginForm 使用过程中遇到的问题

    一.Ajax.BeginForm设置的路由在浏览器中解析不到. 问题截图:在视图中设置"Counter/Index",在浏览器中显示的是"action='/'" ...

  5. WebGL three.js学习笔记 6种类型的纹理介绍及应用

    WebGL three.js学习笔记 6种类型的纹理介绍及应用 本文所使用到的demo演示: 高光贴图Demo演示 反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理 计算机图形学 ...

  6. linux网络基础-网卡bonding技术

    1.bondingbonding(绑定)是一种linux系统下的网卡绑定技术,可以把服务器上n个物理网卡在系统内部抽象(绑定)成一个逻辑上的网卡,实现本地网卡的冗余,带宽扩容和负载均衡.在应用部署中是 ...

  7. kylin cube 构建过程

    本文是对 http://kylin.apache.org/docs20/howto/howto_optimize_build.html的翻译,以便阅读. 1.  创建 Hive 中间表(Create ...

  8. springIOC源码解析之Bean的创建

    上一篇讲到了beanFactory的配置文件的解析和beanFactory的创建,都集中到了obtainFreshBeanFactory();这一句代码里了,本篇主要讲bean的创建过程 public ...

  9. idea长用快捷键

    1CA(ctrl+alt) 1.1(记忆mlv) ctrl alt m 代码封装成方法 ctrl alt L格式化代码 ctrl alt v补全返回值 (eclipse: alt shift l) 1 ...

  10. GPT分区

    GUID分区表(简称GPT.使用GUID分区表的磁盘称为GPT磁盘).它具有如下优点: 1.支持2TB以上的硬盘.    2.分区个数没有限制.但是Windows系统最多支持128个分区.    3. ...