Question

i have few nested table with in datalist like

<asp:DataList ID="dlList" runat="server" Width="50%"
        onitemdatabound="dlList_ItemDataBound">
        <ItemTemplate>
            <table border="0px" id="tblOuter" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
                        <table id="tblInner" border="0px" cellpadding="0" cellspacing="0">
                            <tr class="AccordionPanelTab">
                                <td class="QSHeader"><asp:Label ID="lblHead" runat="server"  Text='<%# Eval("QA") %>'></asp:Label></td>
                                <td align="right"><asp:Image ID="toggleImg" CssClass="ToggleImageStyle" runat="server" ImageUrl="Images/up-arrow.png" />
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr >
                    <td class="AccordionPanelContent"><div  id="content" runat="server" style="padding-left : 10px"></div></td>

                </tr>
            </table>
        </ItemTemplate>
    </asp:DataList>

so i was trying to access element when click on tr having class called “AccordionPanelTab”.

i wrote a jquery to access element like <div id="content">

<asp:Image ID="toggleImg" CssClass="ToggleImageStyle" runat="server" ImageUrl="Images/up-arrow.png" /> when user click on tr having class called "AccordionPanelTab".

my jquery is

---

this is not my actual jquery. here i am doing few trial & error for accessing element.

jQuery(document).ready(function () {
        $("tr.AccordionPanelTab").click(function () {
            alert($(this).parent().parent().attr("id"));
            alert($(this).parent().parent().closest("table").attr("id"));

        });
     })

but i am not being able to do so……..anyone can help. thanks

Answer 1

Try this.

$(document).ready(function () {
    $("tr.AccordionPanelTab").live('click', function () {
        var imageID = $(this).find("img.ToggleImageStyle").attr("id");
        var contentID = $(this).closest("table").parent().parent().next().find("td.AccordionPanelContent div").attr("id");
        //alert("Image ID: " + imageID);
        //alert("Content ID: " + contentID);
    });
});

On an unrelated side note, please refrain from using id="tblOuter" and id="tblInner" inside the Data Presentation Control as it generates invalid HTML. ID should be used only once in an HTML document. Either use runat="server" or change it to class