Solved

Access the text inside a SPAN tag with JS

Posted on 2006-07-19
7
1,166 Views
Last Modified: 2008-01-09
Hi Experts,

how do I get the text inside a SPAN tag that resides within <TD> tags.  Below is the HTML and my attempt at JavaScript:

HTML:
<td>
      <span id="dgAssignedOrders__ctl2_lblDateAssigned" Readonly="true">7/11/2006</span>
</td>
<td>
      <span id="dgAssignedOrders__ctl3_lblDateAssigned" Readonly="true">7/12/2006</span>
</td>

Here is JavaScript that is being called when pressing a button:
function CheckForExistingDates()
{
      var doc = document;
      var table = doc.getElementById('dgAssignedOrders');  
      var rows = table.rows;
      var isFound = false;

      for(var i = 1; i < rows.length; i++)
      {
            var cells = rows[i].getElementsByTagName("TD");
            var curTD = cells[0];
            var curSpanDate = curTD.getElementsByTagName("SPAN");
            alert(curSpanDate.innerHTML);  <----I would like a messgebox to appear with 7/11/2006, etc.
      }      
      return false;
}

0
Comment
Question by:brdrok
7 Comments
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 17141968

you might need to reference the first element of the curSpanDate array like so:

function CheckForExistingDates()
{
     var doc = document;
     var table = doc.getElementById('dgAssignedOrders');  
     var rows = table.rows;
     var isFound = false;

     for(var i = 1; i < rows.length; i++)
     {
          var cells = rows[i].getElementsByTagName("TD");
          var curTD = cells[0];
          var curSpanDate = curTD.getElementsByTagName("SPAN");
          alert((curSpanDate[0]).innerHTML);  
     }    
     return false;
}
0
 
LVL 6

Expert Comment

by:inviser
ID: 17141981
Here is how you access the HTML inside the span tag:

<td>
     <span id="dgAssignedOrders__ctl2_lblDateAssigned" Readonly="true">7/11/2006</span>
</td>
<td>
     <span id="dgAssignedOrders__ctl3_lblDateAssigned" Readonly="true">7/12/2006</span>
</td>

<script language="javascript">
var htmlInsideSpan = document.getElementById("dgAssignedOrders__ctl2_lblDateAssigned").innerHTML;

alert(htmlInsideSpan);
</script>
0
 
LVL 28

Accepted Solution

by:
Pravin Asar earned 500 total points
ID: 17142076
<table id="dgAssignedOrders">
<tr>
<td>HH</td></td>HHH</td>
</tr>

<tr>
<td>
     <span id="dgAssignedOrders__ctl2_lblDateAssigned" Readonly="true">7/11/2006</span>
</td>
<td>
     <span id="dgAssignedOrders__ctl3_lblDateAssigned" Readonly="true">7/12/2006</span>
</td>
</tr>
</table>

Here is JavaScript that is being called when pressing a button:
<script language="javascript">
function getParent (src, tagName) {
     while (src.parentNode != null) {
          if (src.parentNode.tagName  == tagName) {
               return src.parentNode;
          }
          src = src.parentNode;
     }
     return src;
}
function CheckForExistingDates()
{
       var spans = document.getElementsByTagName('SPAN');
       for (sx=0; sx < spans.length; sx++) {
        var tdObj = getParent(spans[sx], "TD");
        if (tdObj) { alert (spans[sx].innerHTML); }

       }
     return false;
}
CheckForExistingDates();
</script>
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 28

Expert Comment

by:Pravin Asar
ID: 17142152
If you happen to have table with many rows/columns , get the SPAN object first and  then determining the
parent (== TD) will be strategy of adopt.

This way will be faster than walking the the table's DOM.



0
 
LVL 7

Author Comment

by:brdrok
ID: 17145594
prvinasar,

your suggestion works like a charm.  In the spirit of learning, could you please explain some of your syntax please.  The part that confuses me is:

if (tdObj)
is that the same as if(tdObj != null)?

Do all objects (well, most of them anyways) have a property called "tagName"?  So, if I had a variable that references an HTML table, the tagName would be "TABLE" without the "<" and ">" brackets?

once again,
thank you very much.
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 17146384
if (tdObj)
is that the same as if(tdObj != null)?

Yes. Both statement mean same thing.
TagName is a tag with < and >  and it is uppercase.


for Table , a tagName is TABLE

0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 17146540
0

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

832 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question