0

ASP.NET で作業しているテーブルがあり、メイン行ごとに 2 つの非表示行があります。これらの行は、テキスト ボックスにコメントを追加するか、2 番目の非表示行のリスト ボックスを使用して、テキスト ボックスに事前に作成されたコメントを入力します。各クライアントの DB 内のデータに基づいているため、行数は不明です。メイン行の 1 つは、その後ろに隠れている行を表示するためのクリック トリガーである最後の列に画像があります。使用しているクリック イベントが何らかの理由で機能しません。どんな助けでも素晴らしいでしょう。

注: クリック イベントが発生した場所をカウントするために for ループも使用しています。テーブルが終了すると、コード ビハインドから for ループがカウンターから実行されるため、"<= 7" はテスト目的のためだけです。

HTML:

  <table id="mfCriteriaTable">
                <tr class="whiteBack mfTableBorder">
                    <td class="mfRightCol showCell" width="140px" align="left">Category</td>
                    <td class="colOne" width="600px" align="left">Criteria for achieving this element of service quality is listed here. Additional Detail click info</td>
                    <td width="50px" align="center"><asp:RadioButton ID="mfScoreRad1" runat="server" /></td>
                    <td width="50px" align="center"><asp:CheckBox ID="mfNA1" runat="server" /></td>
                    <td width="50px" align="center"><asp:CheckBox ID="mfND1" runat="server" /></td> 
                    <td width="75px" align="center"><a href="#" id="mfComments1"><img src="Images/blue_info_tag.png" alt="" /></a></td>
                </tr>
                <tr class="whiteBack" id="commentRow1" style="display:none;"><td colspan="6" id="tdComment1" height="30px"><asp:TextBox ID="txtComments1" CssClass="mfTextComments" runat="server" TextMode="MultiLine"></asp:TextBox></td></tr>
                <tr class="whiteBack" id="slTableComments1" style="display:none;">
                     <td colspan="6" height="30px">
                        <asp:ListBox ID="lbComments1" runat="server" Height="20px" ToolTip="Please select a comment from this list or create your own in the text area above.">
                            <asp:ListItem Value="Comment 1">This is where comment number one will be, this is a longer comment just to see how it will all fit together.</asp:ListItem>
                            <asp:ListItem Value="Comment 2">This is a 2nd comment that is a bit shorter but shows usability. </asp:ListItem>
                            <asp:ListItem Value="Comment 3">And this is a 3rd comment so you are almost done.</asp:ListItem>
                        </asp:ListBox>
                    </td> 
                </tr>
                <tr class="whiteBack mfTableBorder">
                    <td class="mfRightCol showCell" width="140px" align="left">Category</td>
                    <td class="colOne" width="600px" align="left">Criteria for achieving this element of service quality is listed here. Additional Detail click info</td>
                    <td width="50px" align="center"><asp:RadioButton ID="mfScoreRad2" runat="server" /></td>
                    <td width="50px" align="center"><asp:CheckBox ID="mfNA2" runat="server" /></td>
                    <td width="50px" align="center"><asp:CheckBox ID="mfND2" runat="server" /></td> 
                    <td width="75px" align="center"><a href="#" id="mfComments2"><img src="Images/blue_info_tag.png" alt="" /></a></td>
                </tr>
                <tr class="whiteBack" id="commentRow2" style="display:none;"><td colspan="6" id="tdComment2" height="30px"><asp:TextBox ID="txtComments2" CssClass="mfTextComments" runat="server" TextMode="MultiLine"></asp:TextBox></td></tr>
                <tr class="whiteBack" id="slTableComments2" style="display:none;">
                     <td colspan="6" height="30px">
                        <asp:ListBox ID="lbComments2" runat="server" Height="20px" ToolTip="Please select a comment from this list or create your own in the text area above.">
                            <asp:ListItem Value="Comment 1">This is where comment number one will be, this is a longer comment just to see how it will all fit together.</asp:ListItem>
                            <asp:ListItem Value="Comment 2">This is a 2nd comment that is a bit shorter but shows usability. </asp:ListItem>
                            <asp:ListItem Value="Comment 3">And this is a 3rd comment so you are almost done.</asp:ListItem>
                        </asp:ListBox>
                    </td> 
                </tr>
            </table>

Javascript:

     function assignClickHandlerFor(num) {

            window.console && console.log('#mfComments' + num);
            $('#mfComments' + num).click(function (evt) {
                evt.preventDefault();
                evt.stopPropagation();

                var $aBox = $(evt.currentTarget); 

                $aBox.find('tr#commentRow' + num).toggle;
                $aBox.find('tr#slTableComments' + num).toggle;
            });
    }

    var i;

    for (i = 1; i <= 7; i++) {
        assignClickHandlerFor(i);
    }
4

2 に答える 2

2

選択を簡単にするために、すべてのクリック可能な画像を指定してから、次のようにしますclass="mfComments"。

$(function() {
    $('.mfComments').click(function (evt) {
        evt.preventDefault();
        evt.stopPropagation();
        $(this).closest("tr").next("tr").next("tr").andSelf().toggle();
    });
});

ループカウンター事業についてはよくわかりません。それが何を達成することになっているのか理解できません。

于 2012-12-18T19:59:51.663 に答える
1

toggleはメソッドであるため、()その後に必要です。また、要素内findを検索します。内を見たくありません。td

$('tr#commentRow' + num).toggle();
$('tr#slTableComments' + num).toggle();

closestまた、これらの要素にクラスを配置し、prev、next、 などを使用して、 をインクリメントするこの方法ではなく、適切な要素を見つけることを検討することもできますid。少し書き直す必要がありますが、おそらく少しきれいになります。

于 2012-12-18T19:52:54.127 に答える