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 demo

使用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();在树中找回正确的选择器。

简单的可扩展桌子

1 个答案:

jsBin demo