1

我有一个简单的表格，设置为在单击箭头时展开隐藏的 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>

任何帮助表示赞赏！

4

1 回答 1

0

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

于 2012-07-10T21:43:04.130 回答