與隱藏/顯示功能動態表

Question

這裏是我的jsfiddle與表環境：http://jsfiddle.net/pY66Q/

我無法理解我怎麼能寫我的JavaScript以這樣的方式，當與「給定的類名稱的元素點擊「pmap-program-name-label」，點擊處理程序將運行一個表達式，該表達式只會滑動包含被單擊元素的第二個子元素。我希望這是有道理的。

我的HTML：

<table class="pmap-font-clr-drk-grey"> 
<thead> 
    <tr> 
     <th>Audit Program Results</th> 
     <th>Open</th> 
     <th>Closed</th> 
     <th>Overdue</th> 
     <th>Total</th> 
    </tr> 
</thead> 
<tbody> 
    <tr class="pmap-parent-row-odd"> 
     <td class="pmap-program-name-label"><div class="fa fa-plus-circle fa-lg"></div><span>2011 EH&amp;S Audits - USF Sites</span></td> 
     <td><a href="#">1</a></td> 
     <td><a href="#">1</a></td> 
     <td><a href="#">1</a></td> 
     <td><a href="#">1</a></td> 
    </tr> 
    <tr> 
     <td>2011 EH&amp;S Audits - USF Sites</td> 
     <td><a href="#">1</a></td> 
     <td><a href="#">1</a></td> 
     <td><a href="#">1</a></td> 
     <td><a href="#">1</a></td> 
    </tr> 
</tbody> 
<tbody> 
    <tr class="pmap-parent-row-even"> 
     <td class="pmap-program-name-label"><div class="fa fa-plus-circle fa-lg"></div><span>2011 EH&amp;S Audits - USF Sites</span></td> 
     <td><a href="#">1</a></td> 
     <td><a href="#">1</a></td> 
     <td><a href="#">1</a></td> 
     <td><a href="#">1</a></td> 
    </tr> 
    <tr> 
     <td>2011 EH&amp;S Audits - USF Sites</td> 
     <td><a href="#">1</a></td> 
     <td><a href="#">1</a></td> 
     <td><a href="#">1</a></td> 
     <td><a href="#">1</a></td> 
    </tr> 
</tbody> 
<tfoot> 

</tfoot> 

我的CSS：

table { 
width: 100%; 
border: 1px #eaeaea solid; 
} 

th { 
width: 10%; 
text-align: center; 
border-bottom: 4px #007290 solid; 
padding: 5px 0; 
} 

th:first-child { 
width: 60%; 
text-align: left; 
border-bottom: 4px #007290 solid; 
padding: 5px 0 5px 20px; 
font-family: 'Segoe UI Bold' sans-serif; 
font-weight: normal; 
} 

tr:nth-child(2) { 
display: none; 
} 

td { 
width: 10%; 
text-align: center; 
border-bottom: 1px #eaeaea solid; 
border-left: 1px #eaeaea solid; 
padding: 0; 
line-height: 30px; 
} 

td:first-child { 
width: 60%; 
text-align: left; 
border-bottom: 1px #eaeaea solid; 
padding-left: 38px; 
} 

td.pmap-program-name-label { 
width: 60%; 
text-align: left; 
border-bottom: 1px #eaeaea solid; 
padding: 2px 0 0 10px; 
color: #007290; 
font-weight: bold; 
cursor: pointer; 
} 

td.pmap-program-name-label span { 
padding-left: 10px; 
} 

tr.pmap-parent-row-odd { 
background-color:#FFFFFF; 
} 

tr.pmap-parent-row-even { 
background-color: #F3F4F5; 
} 

td a { 
text-decoration: none; 
color: #007290; 
font-weight: bold; 
} 

我的JavaScript/jQuery的：

$(document).ready(function() { 

/* 
================================================ 
Toggles Form Parent/Children Data Fields 
================================================ 
*/ 

var sectionAnimating = false; 

$('.pmap-program-name-label').click(function() { 
    if (sectionAnimating == false) { 
     $("tbody").find('tr:nth-child(2)').slideToggle(450, function() { 
      sectionAnimating = false; 
     }); 
     sectionAnimating = true; 
    } 
}); 

}); 

謝謝！

Answer 1

這裏u有代碼

(document).ready(function() { 

    /* 
    ================================================ 
    Toggles Form Parent/Children Data Fields 
    ================================================ 
    */ 

    var sectionAnimating = false; 

    $('.pmap-program-name-label').click(function() { 
     if (sectionAnimating == false) { 
      console.log(this.parentNode.parentNode) 
      $(this.parentNode.parentNode).find('tr:nth-child(2)').slideToggle(450, function() { 
       sectionAnimating = false; 
      }); 
      sectionAnimating = true; 
     } 
    }); 

});