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 に答える