Javascript 具有隐藏/显示功能的动态表格

下面是我对表环境的JSFIDLE：

我很难理解如何编写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>

我的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;
    }
});

});

这是你的密码

(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;
        }
    });

});

---

谢谢，这和我想象的完全一样，我了解了parentNode。我目前正在阅读eloquentjavascript.net（目前在第3章），因为我对编程还不熟悉，但至少可以说我很喜欢它。Dom节点是整个javascript的基础^^“我正在阅读eloquentjavascript.net（目前在第3章）”

(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;
        }
    });

});