需求:用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. assert.fail()

    assert.fail(message) assert.fail(actual, expected[, message[, operator[, stackStartFunction]]]) oper ...

  2. Ubuntu 使用 heirloom-mail 调用外部邮箱 SMTP 服务器发送邮件

    使用本地服务发邮件,经常被过滤掉而且占用资源,发送成功率不高.所以使用外部SMTP服务器发送邮件成为了需求. SMTP认证的目的是为了使用户避免受到垃圾邮件的侵扰,简单地说就是要求必须在提供了账户名和 ...

  3. mahout过滤推荐结果 Recommender.recommend(long userID, int howMany, IDRescorer rescorer)

    Recommender.recommend(uid, RECOMMENDER_NUM, rescorer); Recommender.recommend(long userID, int howMan ...

  4. Jmeter分布式测试需要注意事项

    Jmeter分布式测试需要注意事项: 1. 如果脚本中有用到CSV Data Set Config,则所有的模拟机都必须在相应的目录下存在该文件.如下图,则必须所有模拟机的F盘下都有user.txt文 ...

  5. Struts2学习第七课 result

    result 是action节点的子节点 result 代表action方法执行后,可能去的一个目的地 一个action节点可以配置多个result子节点. result的name属性值对应着acti ...

  6. Hibernate学习第一课

    Hibernate是一个框架 一个Java领域的持久化框架 一个ORM框架 对象的持久化: 狭义的理解:“持久化”仅仅指把对象永久保存到数据库中. 广义的理解:“持久化”包括和数据库相关的各种操作: ...

  7. java多态和强制类型转换

    子类可以赋值给超类,称之为向上转型,这个是自动的. 超类不可以赋值给子类,这个是向下转型,需要我们手动实现. 赋值给超类的子类引用在运行期间将表现出不同的特性,这就是多态. 小类型    可转换为   ...

  8. php小块代码

    //页面本身网址 "http://".$_SERVER["HTTP_HOST"].preg_replace("/[^\/]+$/",&quo ...

  9. redis系列:通过通讯录案例学习hash命令

    前言 这一篇文章将讲述Redis中的hash类型命令,同样也是通过demo来讲述,其他部分这里就不在赘述了. 项目Github地址:https://github.com/rainbowda/learn ...

  10. 微信小程序自学第五课:条件渲染、列表渲染

    一.条件渲染 1. wx:if 在框架中,我们用 wx:if="{{condition}}" 来判断是否需要渲染该代码块: <view wx:if="{{condi ...