Access Table values with Javascript

[sap_cohort]

Hi,

Can someone show how to access the 2 table <TD> values via javascript and output the values?

The catch is that I'm trying to do this with Javascript using the <DIV> ID "daterange" identifier instead of the Table Name ID. Is this possible?

<div id="daterange"  style="VISIBILITY: hidden" >
     <span id="sapbi_snippet_DATE_RANGE_OUTPUT">
          <table id="DATE_RANGE_OUTPUT_interactive_pivot" border="1px" >
               <tr><td>03/07/2008</td></tr>
               <tr><td>03/14/2008</td></tr>
          </table>
     </span>
</div>

[former_member185132 · Accepted solution]

Hi Kenneth,

getElementByTagName returns an array, so we'll have to loop through and pick up the array elements like this:

var DIV;
var TD;

DIV = document.getElementById("daterange");
TD = DIV.getElementsByTagName("TD");
var TDCount=TD.length;

for ( var i = 0; i < TDcount; i++)
{
var thtml = TD<i>#innerHTML#
document.write(thtml);
}

Edited by: Suhas Karnik on Apr 22, 2008 4:07 PM

[sap_cohort · Accepted solution]

Thanks Andrew and Suhas! I now have what I need. I really appreciate you sticking through to the end!

Points awarded.

[Former Member]

Hi there

Here is one way of doing it:

var oTable = document.getElementById("DATE_RANGE_OUTPUT_interactive_pivot");
    

for (var iTDCount = 0; iTDCount< oTable.childNodes.item(0).childNodes.length; iTDCount++){
        var oTR = oTable.childNodes.item(0).childNodes.item(iTDCount);
        var oTD = oTR#childNodes#item(0)#innerHTML;
}

Please replace the # with . in the last line of the loop ... for some reason I couldn't get the post saved with .s ????

Let me know if this doesn't work, or I misunderstood your question.

Cheers,

Andrew

Edited by: Andrew Lewis on Apr 22, 2008 9:57 AM

Edited by: Andrew Lewis on Apr 22, 2008 9:58 AM

[sap_cohort]

I think we are on the right track. In Javascript the only thing I'm thinking to use is the <DIV> ID "daterange". This is the only static ID created by me in the web template code. The other ID's are all SAP generated and subject to change down the road.

So, using only the "daterange" DIV ID as a starting point is it possible to get the TD entries within "daterange"?

<div  id="daterange"  style="VISIBILITY: hidden;" >
     <span id="sapbi_snippet_DATE_RANGE_OUTPUT">
          <table id="DATE_RANGE_OUTPUT_interactive_pivot" border="1px" >
               <tr>
                    <td>12/07/2007</td>
               </tr>
               <tr>
                    <td>12/07/2007</td>
               </tr>
          </table>
     </span>
</div>

[Former Member]

OK, so I was in a bit of hurry to answer and didn't read your source code properly.

You can use the same logic, just start higher up in the HTML and keep checking the childNodes:

var oDIV = document.getElementById("daterange");
    
    var oTable2 = oDIV.childNodes.item(0).childNodes.item(0);

Now that you have oTable2, just use the same loop, and replace oTable with oTable2

Alternately, there is a javascript command getElementsByTagName ... you can read up about this and see how you could apply it. Theoretically you can get the reference to the DIV using the getElementById method, then use oDiv.getElementsByTagName("TD") and get all cells ... give it a go

Cheers,

Andrew

[sap_cohort]

Sounds great! I'd like to use the getElementsByTagName!

Here's what I came up with, but it doesn't work. Can you help to complete?

var DIV;

var TD;

var TDCount;

DIV = document.getElementById("daterange");

TD = DIV.getElementsByTagName("TD");

for ( TDCount = 0; TDCount < TD.count; TDCount++)

{

TD = TD#innerHTML#

document.write(TD);}