jQuery:尝试显示/隐藏表行 [英] Jquery: Trying to Show/Hide Table Rows

问题描述

我正在尝试使用Jquery显示/隐藏表行，并且在效果方面遇到了一些问题.基本上，我有一个事件时间表，当您单击特定行中的详细信息"按钮时，它应该在其正下方显示该行.

I am trying to show/hide table rows using Jquery and am running into a few issues with the effects. Basically, I have a schedule of events, and when you click on the "Details" button in a specific row, it should show the row directly below it.

这是我正在处理的页面的链接:

Here is the link to the page I am working on:

http://dev.csgalinks.org/index.php/Tournament_Series/日历/一个％20天

但是，至少可以说，效果有点令人不安，更不用说我还没有开发出一种手风琴"方法，该方法可以折叠除一个活动控件之外的所有行.

However, the effects are a bit jumpy to say the least, not to mention I haven't been able to develop an "accordion" method which collapses all rows except the one active.

HTML代码(ExpressionEngine使用{count}变量)

HTML code (ExpressionEngine utilizes the {count} variable)

<table width="100%" class="calendar_table">
    <thead>
          <tr>
               <th>Date</th><th>Event/Location</th><th>Registration Opens</th><th>Actions</th>
          </tr>
    </thead>
    <tbody>
      <tr class="parent" id="{count}">
     <td>{startDate format="%F %d"}{if endDate != startDate} - {endDate format="%d"}{/if}, {startDate format="%Y"}</td>
         <td>{if event_summary}<span class="btn"><a href="#" class="calendar">{event}</a>{if:else}{event}{/if}</td>
     <td>{opendate format="%F %d"}</td>
             <td><span class="btn"><a href="#">Details</a></span></td>
      </tr>
          <tr class="child-{count}" height="280" style="display:none;width:900px;">
               <td colspan="4">

                           HIDDEN DROPDOWN CONTENT HERE
               </td>
          </tr>
</table>

和Javascript: http://code.jquery.com/jquery-1.8.3.js'>

And the Javascript: http://code.jquery.com/jquery-1.8.3.js'>

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(function() {
    $('tr.parent td')
        .on("click","span.btn", function(){
            var idOfParent = $(this).parents('tr').attr('id');
            $('tr.child-'+idOfParent).toggle('slow');
        });
    });
});

</script>

推荐答案

一件事，您在隐藏行之前缺少结尾</tr>

for one thing your missing an ending </tr> before the hidden row

一种实现方法是在jQuery中使用 data()函数，该函数可以将信息存储在标签.

One way to do it is use the data() function in jQuery which can store information in the tag.

    <tr class="parent">
        <td> <span class="btn">
                    <a data-id="{id}" href="#">Details</a>
                    <!-- notice data-id -->
                </span>
        </td>
    </tr><!-- this wasn't there -->
    <tr class="child" id="child-{id}" height="280" style="display:none;width:900px;">
        <td colspan="4">HIDDEN DROPDOWN CONTENT HERE</td>
    </tr>

然后使用jQuery

then for jQuery

$('tr.parent td').on("click", "span.btn a", function () {
    var id = $(this).data('id'); // save id from the link. 

    $(".child").slideUp(); // slideUp all of them

    $("#child-" + id).slideDown(); // slideDown the one we're looking for. 
});

http://jsfiddle.net/M6WQa/

有很多方法可以做到这一点，但这只是一种方法.

There's many ways to do this, this is only one way.

这篇关于jQuery:尝试显示/隐藏表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！