locked
Show/Hide text link in dynamic table RRS feed

  • Question

  • User1144600762 posted

    Hi,

    I have a table generated and populated dynamically using jquery/ajax.  I would like to add logic to provide a show/hide link for text in a table cell that exceeds 50 characters in length.  I've only found examples that show this working with static tables.  Can someone provide an example of accomplish this using jquery/javascript?  thanks for help.

    Wednesday, September 7, 2016 12:20 PM

Answers

  • User-1142886626 posted

    Hi cowasaki,

    You could bind link on click event dynamically, then use this () find the element you want show or hide.

    Code below is for your reference:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $(".LinkButton2").click(function () {
                    $(this).parent().find("span").hide();
                    return false;
                })
                $(".LinkButton1").click(function () {
                    $(this).parent().find("span").show();
                    return false;
                })
            })
        </script>
    <body>
        <form id="form1" runat="server">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
                <Columns>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            ID
                        </HeaderTemplate>
                        <ItemTemplate>   
                            <asp:Label ID="lbldes" runat="server" Text='<%#Eval("ID") %>'></asp:Label>                     
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            Owner
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:Label ID="lbldes" runat="server" Text='<%#Eval("Owner") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            RegNo
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:Label ID="lbldes" runat="server" Text='<%#Eval("RegNo") %>'></asp:Label>
                            <asp:LinkButton class="LinkButton1" runat="server">show</asp:LinkButton>
                            <asp:LinkButton class="LinkButton2" runat="server">hide</asp:LinkButton>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </form>
    </body>
    
    

    Best Regards,
    Ailleen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 7, 2016 1:05 PM

All replies

  • User-183374066 posted

    Whatever is render on page or you are manipulated DOM by dynamic injection from jquery,it is accessible in javascript/jquery. You can add a class to your dynamic table and access that table from class name like $('.classname'), find your cell and show hide on base of content length .. Other option is you can give class name to your cell where you want to apply that logic and access that through jquery 

    Wednesday, September 7, 2016 12:51 PM
  • User-1142886626 posted

    Hi cowasaki,

    You could bind link on click event dynamically, then use this () find the element you want show or hide.

    Code below is for your reference:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $(".LinkButton2").click(function () {
                    $(this).parent().find("span").hide();
                    return false;
                })
                $(".LinkButton1").click(function () {
                    $(this).parent().find("span").show();
                    return false;
                })
            })
        </script>
    <body>
        <form id="form1" runat="server">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
                <Columns>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            ID
                        </HeaderTemplate>
                        <ItemTemplate>   
                            <asp:Label ID="lbldes" runat="server" Text='<%#Eval("ID") %>'></asp:Label>                     
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            Owner
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:Label ID="lbldes" runat="server" Text='<%#Eval("Owner") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            RegNo
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:Label ID="lbldes" runat="server" Text='<%#Eval("RegNo") %>'></asp:Label>
                            <asp:LinkButton class="LinkButton1" runat="server">show</asp:LinkButton>
                            <asp:LinkButton class="LinkButton2" runat="server">hide</asp:LinkButton>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </form>
    </body>
    
    

    Best Regards,
    Ailleen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 7, 2016 1:05 PM
  • User-1843624578 posted

    We can add a class to our dynamic table and access that table from class name like $('.classname'), find your cell and show hide on base of content length .

    For the reference please see the below code: On click we can hide/show 

    $(function() {
    $(".add").click(function() {
    $("<tr class='new'><td></td><td><b>URL:</b> <input type='text' id='newURL' /><br /><b>Title:</b> <input type='text' id='newTitle' /><br /><b>Description:</b><br /><textarea id='newDesc'></textarea></td><td><b>Tags:</b> <input type='text' id='newTags' /></td></tr>")
    .append($("<td></td>")
    .append($("<a href='#'>Save</a><br/>")
    .click(function() { $(this).parents(".new").animate({ backgroundColor: "#FF0000" }, "fast").animate({ opacity: "hide" }, "slow"); }))
    .append($("<a href='#'>Cancel</a>")
    .click(function() { $(this).parents(".new").animate({ backgroundColor: "#FF0000" }, "fast").animate({ opacity: "hide" }, "slow"); })))
    .insertAfter($("table#bookmarks tr:first"));
    $('span#links').html('<i style="color: #FF0000">You must reload to recount links!</i>');
    });
    });

    Wednesday, September 14, 2016 7:33 AM