0

我有一个我正在 ASP.NET 中处理的表，其中每个主行都有 2 个隐藏行，这些行用于在文本框中添加评论或使用第二个隐藏行中的列表框来使用预先制作的评论填充文本框。将有未知数量的行，因为它基于我们数据库中每个客户端的数据。在主行的最后一列中有一个图像，它是单击触发器，用于显示隐藏在其后面的行。由于某种原因，我正在使用的 click evt 无法正常工作。任何帮助都会很棒。

注意：我还使用 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等来定位适当的元素，而不是这种递增ids 的方法。这将需要重新编写，但可能会更干净一些。

于 2012-12-18T19:52:54.127 回答