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

JavaScript
1

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

<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

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 :slight_smile:


//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 = "";

}
3

John,

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

thanks

4

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

You could most definitely put an ID on a <tr> (TR supports the "[URL=“http://www.w3.org/TR/html4/sgml/dtd.html#coreattrs”]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 [URL=“http://code.google.com/chrome/devtools/docs/elements.html”]Chrome Dev Tools for example.

6

Thanks a lot John.

Appreciate your help.