How to select a row element value from Oracle APEX

Here is the challenge..

I have a classic report based on SQL on Region 1 in Oracle APEX 4

The report (Report1) is structured like

    DATE_COL(this column will be hidden) or even the whole region can be hidden)
Row1    12-01-2001
Row2    11-01-2001
Row3    10-01-2001

I want to select the value of DATE_COL of Row1 which is Date1 and assigned that to a label of an ITEM which can be on the same page or another page..

The ITEM say for example is P_ITEM whose name will be displayed as 12-01-2001 on the screen

So, essentially I want to select a Row1 element of report of column DATE_COL and use that as label name

Then I wan to select Row2 element of the DATE_COL which is DATE2 and assigned to the col1 label of another report on the same page which is Report2 and will look like this

 <a href = "www.google.com"> 11-01-2001 </a> (this name is coming from report 1 of DATE_COL of Row2 element) also it has link

Row1   100
Row2   200

Please guide me how to accomplish this one.

The example html looks like this

<!DOCTYPE html>
<html>
<body>

<table id="report_R124146326020103259" cellspacing="1" cellpadding="0" border="1" summary="">
<tbody>

<tr>

<td>

<table class="report-standard" cellspacing="1" cellpadding="2" border="0" summary="">

<tbody>

<tr>
 <th id="DATE1" class="header" align="left">DATE1</th>
 <th id="DATE2" class="header" align="left">DATE2</th>
 <th id="DATE3" class="header" align="left">DATE3</th>
 <th id="DATE4" class="header" align="left">DATE4</th>
 <th id="DATE5" class="header" align="left">DATE5</th>
</tr>

<tr class="highlight-row">
 <td class="data" headers="DATE1">12-01-2001</td>
 <td class="data" headers="DATE2">11-01-2001</td>
 <td class="data" headers="DATE3">10-01-2001</td>
 <td class="data" headers="DATE4">09-01-2001</td>
 <td class="data" headers="DATE5">08-01-2001</td>
</tr>

<tr class="highlight-row">
 <td class="data" headers="DATE1">10-01-2001</td>
 <td class="data" headers="DATE2">09-01-2001</td>
 <td class="data" headers="DATE3">08-01-2001</td>
 <td class="data" headers="DATE4">12-01-2001</td>
 <td class="data" headers="DATE5">11-01-2001</td>
</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</body>
</html>

I guess JQuery can be used to accomplish, but not sure, how the selector need to use.

Thanks, --CP

EDIT 1

I created following script based on Tom's Jquery selector which does selects the row element. However the following script which I ran in W3Schools html editor didn't select the row element, which I put in Test function. The test function which I am calling in "A tag" didn't produce any results. However the other function which is WelcomeMessage did produce the result. Can anybody help me identify the error?

<!DOCTYPE html>
<html>

<head>

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript"> 
    function test(i) { 
       var ab = $("#report_DT tr:eq(i) td.data[headers='DATE1']").text();
       document.write(ab);
    }

    function welcomeMessage()
    {
      document.write("Welcome to Henley's Department Store!");
    }
    </script>

    </head>


    <body>

    <table id="report_DT" cellspacing="1" cellpadding="0" border="1" summary="">
    <tbody>

    <tr>

    <td>

    <table class="report-standard" cellspacing="1" cellpadding="2" border="0" summary="">

    <tbody>

    <tr>
     <th id="DATE1" class="header" align="left">DATE1</th>
     <th id="DATE2" class="header" align="left">DATE2</th>
     <th id="DATE3" class="header" align="left">DATE3</th>
     <th id="DATE4" class="header" align="left">DATE4</th>
     <th id="DATE5" class="header" align="left">DATE5</th>
    </tr>

    <tr class="highlight-row">
     <td class="data" headers="DATE1">12-01-2001</td>
     <td class="data" headers="DATE2">11-01-2001</td>
     <td class="data" headers="DATE3">10-01-2001</td>
     <td class="data" headers="DATE4">09-01-2001</td>
     <td class="data" headers="DATE5">08-01-2001</td>
    </tr>

    <tr class="highlight-row">
     <td class="data" headers="DATE1">10-01-2001</td>
     <td class="data" headers="DATE2">09-01-2001</td>
     <td class="data" headers="DATE3">08-01-2001</td>
     <td class="data" headers="DATE4">12-01-2001</td>
     <td class="data" headers="DATE5">11-01-2001</td>
    </tr>

    </tbody>

    </table>

    </td>

    </tr>

    </tbody>

    </table>

    <a href ="default.asp">  

    <div> <Script Language="JavaScript">
                         test(i);
                      </Script>
                 </div>


    </a>


    <a href ="default.asp">  

    <div> <Script Language="JavaScript">
                         welcomeMessage();
                      </Script>
                 </div>


    </a>
    </body>
    </html>

Can anybody spot the error why test function is not retrieving the desired result?

Ideally you want to assign your region a static id (edit region > attributes > static id)

then use

$("#yourregionid tr:eq("+ rownumber_you_need +") td.data[headers='"+ header_id +"']").text()

Take note that :eq uses a zero-index based system, so row 0 would be the one with the headers, and row 1 your first row with actual data. Replace header_id with the header of the column you need data from. In your example:

$("#yourregionid tr:eq(1) td.data[headers='DATE1']").text()
$("#yourregionid tr:eq(2) td.data[headers='DATE2']").text()

Edit:

<a href="javascript:test(1);">click for a test</a>
<script type="text/javascript"> 
function test(i) { 
   var ab = $("#report_DT tr:eq(i) td.data[headers='DATE1']").text();
   alert(ab);
}; 
</script>

Edit 2: So if you want to actively manipulate the table headers for your second report: - assign a static region id to your report region 2 - create a dynamic action for the "After refresh" event, for a region (your second region). This is necessary to allow pagination on your region while still maintaining the altered headers. - for true action, select an execute javascript code:

$("#report2staticid th").each(function(index){
   var linktext, newlink;
   if(index==0){
      linktext = $("report1staticid tr:eq(1) td.data[headers='DATE1']").text();
      newlink = $("<a />").attr("href", "www.google.com").text(linktext);
   } else if(index==1){
      //something for header 2
   } else if(index==2){
      //andsoforth
   };
   $(this).html(newlink);
});

This loops over each TH element in your second report, and changes the html content of each th: we put a new A-tag in each one.

Edit 3: You made some mistakes in your implementation:

function test(i) { 
   var ab = $("#report_DT tr:eq(i) td.data[headers='DATE1']").text();
   document.write(ab);
}

should be

function test(i) { 
   var ab = $("#report_DT table.report-standard tr:eq("+i+") td.data[headers='DATE1']").text();
   document.write(ab);
}

i is an input parameter, and you need to concatenate it into the selector string.

Your HTML script tag is also wrong. You call test and provide "i" to it. What is "i"? Nowhere is it defined. Provide a value. (Remember, this is the rownumber.)

<Script Language="JavaScript">test(1);</Script>

Full code:

<!DOCTYPE html>
<html>
   <head>
      <script type="text/javascript" src="jquery.js"></script>
      <script type="text/javascript">
      function test(i) {
         var ab = $("#report_DT table.report-standard tr:eq("+i+") td.data[headers='DATE1']").text();
        document.write(ab);
      }
      function welcomeMessage()     {
      document.write("Welcome to Henley's Department Store!");
      }
      </script>
      <title></title>
   </head>
   <body>
      <table id="report_DT" cellspacing="1" cellpadding="0" border="1" summary="">
         <tbody>
            <tr>
               <td>
                  <table class="report-standard" cellspacing="1" cellpadding="2" border=
                  "0" summary="">
                     <tbody>
                        <tr>
                           <th id="DATE1" class="header" align="left">
                              DATE1
                           </th>
                           <th id="DATE2" class="header" align="left">
                              DATE2
                           </th>
                           <th id="DATE3" class="header" align="left">
                              DATE3
                           </th>
                           <th id="DATE4" class="header" align="left">
                              DATE4
                           </th>
                           <th id="DATE5" class="header" align="left">
                              DATE5
                           </th>
                        </tr>
                        <tr class="highlight-row">
                           <td class="data" headers="DATE1">
                              12-01-2001
                           </td>
                           <td class="data" headers="DATE2">
                              11-01-2001
                           </td>
                           <td class="data" headers="DATE3">
                              10-01-2001
                           </td>
                           <td class="data" headers="DATE4">
                              09-01-2001
                           </td>
                           <td class="data" headers="DATE5">
                              08-01-2001
                           </td>
                        </tr>
                        <tr class="highlight-row">
                           <td class="data" headers="DATE1">
                              10-01-2001
                           </td>
                           <td class="data" headers="DATE2">
                              09-01-2001
                           </td>
                           <td class="data" headers="DATE3">
                              08-01-2001
                           </td>
                           <td class="data" headers="DATE4">
                              12-01-2001
                           </td>
                           <td class="data" headers="DATE5">
                              11-01-2001
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </td>
            </tr>
         </tbody>
      </table><a href="default.asp">
      <div>
         <script language="JavaScript" type="text/javascript">
         test(1);
         </script>
      </div>
      </a>
      <a href="default.asp">
      <div>
         <script language="JavaScript" type="text/javascript">
         welcomeMessage();                       
         </script>
      </div>
      </a>
   </body>
</html>