简单的可扩展桌子

Question

我有一个简单的表，它被设置为在单击箭头时展开隐藏的tr，问题是我在可见行中单击的所有内容都会显示隐藏的tr。我只需要这个隐藏的tr就可以在单击箭头时展开。

这是我的脚本：

    $(document).ready(function(){
        $("#report tr:odd").addClass("odd");
        $("#report tr:not(.odd)").hide();
        $("#report tr:first-child").show();
        $("#report tr.odd").click(function(){
            $(this).next("tr").toggle();
            $(this).find(".arrows").toggleClass("up");
        });
        //$("#report").jExpand();
    });

这是我的桌子：

<table id="report">
    <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td><div class="arrows"></div></td>
        <td class="title">Verify Business Name Availabilty</td>
        <td style="width: 190px;"><img src="images/green-arrow-check.png" /></td>
        <td style="background-color: #bebebe; width: 190px;"><img src="images/white-arrow-check.png" /></td>
        <td style="background-color: #bebebe; width: 190px;"><label><input type="radio" name="modifiers[107]" value="106" /> $99 (yearly)</label></td>
    </tr>
    <tr>
        <td class="arrows"></td>
        <td class="information">
            Ulciscor ut commoveo iriure praemitto vero praesent, iriure ratis aliquip mauris eu causa. Paulatim, patria jugis damnum sed luptatum, bene iustum. Transverbero obruo eligo letatio occuro, pala, demoveo autem velit inhibeo, usitas.   
        </td>
        <td></td>
        <td style="background-color: #bebebe; width: 190px;"></td>
        <td style="background-color: #bebebe; width: 190px;"></td>
    </tr>
    <tr>
        <td><div class="arrows"></div></td>
        <td>Prepare Incorporation Documents</td>
        <td><img src="images/green-arrow-check.png" /></td>
        <td style="background-color: #bebebe;"><img src="images/white-arrow-check.png" /></td>
        <td style="background-color: #bebebe;"><img src="images/white-arrow-check.png" /></td>
    </tr>
    <tr>
        <td class="arrows"></td>
        <td class="information">
            Ulciscor ut commoveo iriure praemitto vero praesent, iriure ratis aliquip mauris eu causa. Paulatim, patria jugis damnum sed luptatum, bene iustum. Transverbero obruo eligo letatio occuro, pala, demoveo autem velit inhibeo, usitas.   
        </td>
        <td></td>
        <td style="background-color: #bebebe; width: 190px;"></td>
        <td style="background-color: #bebebe; width: 190px;"></td>
    </tr></table>

感谢您的帮助！

Answer 1

jsBin演示

使用td:eq(1)来更具体地说明触发元件

$(document).ready(function(){
        $("#report tr:odd").addClass("odd");
        $("#report tr:not(.odd)").hide();
        $("#report tr:first-child").show();
  $("#report tr.odd td:eq(1)").click(function(){
            $(this).closest('tr').next("tr").toggle();
            $(this).closest('tr').find(".arrows").toggleClass("up");
        });
        //$("#report").jExpand();
    });

并确保使用：$(this).closest('tr').next("tr").toggle();在树中找到正确的选择器。