SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What is the best way to reach all LabelControls in a table - using getElementbyTag??

    Hello folks,

    BTW this is the best website for learning Javascript.

    Basically I have bunch of label controls in a table element (in a row).

    When user clicks a button, I would like to clear the text of all those label elements. What is the best way to do this.

    Here is my thought and help me out here.

    With the combination of getElementByID and getElementByTagName we can get all the elements under an ID

    Like the following way.

    var allLabels = document.getElementById("someID").getElementsByTagName("Label");

    But in my situation, the Labels are in <td> elements. How can i reach all the Labels? Any suggestions please?

    Thanks

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="ReachAllLabelControls();" />
        <table border="1">
        <tr>
                    
                    <td >
                        
                        <asp:Label ID="LabelCountAdvs" runat="server" Text=""></asp:Label>
                    </td>
                    <td>
                        <asp:Label ID="LabelCountSwaps" runat="server" Text=""></asp:Label>
                    </td>
                    <td>
                        <asp:Label ID="LabelCountBonds" runat="server" Text="">bonds</asp:Label>
                    </td>
                    <td>
                        <asp:Label ID="LabelCountDNs" runat="server" Text="">DN's</asp:Label>
                    </td>
                    <td>
                        <asp:Label ID="LabelCountDeposits" runat="server" Text="">Deposits</asp:Label>
                    </td>
                    <td>
                        <asp:Label ID="LabelCountMBS" runat="server" Text="">MBS</asp:Label>
                    </td>
                  
                        <asp:Label ID="LabelGl" runat="server" Text="">GL</asp:Label>
                    </td>
                </tr>
    
        
        </table>
        </div>
        </form>
        <script language="javascript" type="text/javascript">
        
            function ReachAllLabelControls() {
                
               // var pars = document.getElementById(
            }
        </script>
    </body>
    </html>

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi Jason,

    What do those <asp:Label> tags render out as (it's been a while since I've worked on an ASP web forms based site, but from memory it just renders a <span> tag right?)

    In either case, what you'll want to do, is set perhaps an ID on the table, so we can find it with getElementsById().

    When you use getElementsByTagName() it will return all elements with the specified tag name in the referenced collection. So your code to get all the labels was 99% there :-)

    Code javascript:
    //let's assume your table has an id of "labelTable" and that your <asp:Labels> are rendering <span> tags
    var allLabels = document.getElementById("labelTable").getElementsByTagName("span");
     
    // allLabels is now an array with references to all <span> tags in the labelTable
    // we can iterate through them and set the innerHTML to empty
     
    var i = 0;
    var len = allLabels.length;
     
    for ( i; i < len; i++) {
     
        allLabels[i].innerHTML = "";
     
    }
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    John,

    Instead of having ID on the table element, can we have ID for a <tr> element?

    thanks

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works like a charm John.

    You are the man!!

    Question though why does <asp Label> control render out as a <span> tag? I know <asp Label> is a server control and not a HTML control. Does all server controls get rendered onto HTML <span> tag?

    thanks
    nath

  5. #5
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You could most definitely put an ID on a <tr> (TR supports the "coreattrs")

    Many ASP.NET server side controls render out as different HTML tags than you might expect based on the ASP tag name, e.g. asp:Label does not render a <label>. If you wanted to make sure that you're 100% in control of the markup (in this scenario) you could use <asp:Literal>

    An easy way to see what is rendered out would be to inspect those elements with Firebug or Chrome Dev Tools for example.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot John.

    Appreciate your help.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •