展开表格行以显示更多数据

Question

我有一张桌子，我想做的是在其中一列中有一个按钮/链接，一旦点击它，下面就会出现另一行，其中包含更多信息。

我已经开始构建一个示例，我遇到的问题是两行当前都是可见的，当我单击视图链接时，两行都向下滑动。我实际上想要做的是让一行可见，然后当我单击视图时，第二行变得可见。

这是我的演示链接：http://jsfiddle.net/leest/Jgrja/

这是我的代码

HTML

 <table class="">
            <!-- Table heading -->
            <thead>
                <tr>
                    <th>Rendering eng.</th>
                    <th>Browser</th>
                    <th>Platform(s)</th>
                    <th>Eng. vers.</th>
                    <th>CSS grade</th>
                </tr>
            </thead>
            <!-- // Table heading END -->

            <!-- Table body -->
            <tbody>
                <!-- Table row -->
                <tr class="gradeX">
                    <td>Trident</td>
                    <td>Internet Explorer 4.0</td>
                    <td>Win 95+</td>
                    <td class="center">4</td>
                    <td class="center"><a href="#"   class="show_hide" rel="#slidingDiv">View</a><br /></td>
                    </tr>
                <div id="slidingDiv">
                <tr>
                    <td>Trident</td>
                    <td>Internet Explorer 4.0</td>
                    <td>Win 95+</td>
                    <td class="center">4</td>
                    <td class="center">X</td>
                     </div>
                </tr>

            </tbody>

        </table>

JavaScript 代码

    $(document).ready(function(){


    $('.show_hide').showHide({           
    speed: 1000,  // speed you want the toggle to happen    
    easing: '',  
    changeText: 1, // if you dont want the button text to change, set this to 0
    showText: 'View',// the button text to show when a div is closed
    hideText: 'Close' // the button text to show when a div is open

    }); 


          }); 


  (function ($) {
$.fn.showHide = function (options) {

    //default vars for the plugin
    var defaults = {
        speed: 1000,
        easing: '',
        changeText: 0,
        showText: 'Show',
        hideText: 'Hide'

    };
    var options = $.extend(defaults, options);

    $(this).click(function () { 

         $('.toggleDiv').slideUp(options.speed, options.easing);    
         // this var stores which button you've clicked
         var toggleClick = $(this);
         // this reads the rel attribute of the button to determine which div id to toggle
         var toggleDiv = $(this).attr('rel');
          using which easing effect
         $(toggleDiv).slideToggle(options.speed, options.easing, function() {
         // this only fires once the animation is completed
         if(options.changeText==1){
         $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
         }
               });

      return false;

              });

            };
           })(jQuery);

我不确定我在这方面是否走对了路，所以任何建议都将不胜感激。

谢谢

Answer 1

不要将行包装在 div 中。尝试为您希望显示/隐藏的实际 <tr> 设置动画： http://jsfiddle.net/Jgrja/1/