Question

I have a table I am working on in ASP.NET that has 2 hidden rows for every main row, these rows are to add comments in a textbox or use the listbox in the 2nd hidden row to populate the textbox with pre-made comments. There will be an unknown amount of rows as it is based off data in our DB for each client. One the main row there is an image in the last column that is the click trigger to show the rows hidden behind it. The click evt I am using isn’t working for some reason. Any help would be great.

Note: I am also using a for loop to count where my click event happens, when the table is finished the for loop will be ran off a counter from the code behind, so the “<= 7” is just for testing purposes.

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);
    }

Answer 1

To make selection easier, give all your clickable images class="mfComments", then :

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

I’m not sure about the loop counter business. I can’t understand what it is supposed to achieve.