如何从 Oracle APEX 4 经典报告中选择行元素值（表标签中的行元素）答案

【问题标题】：How to select a row element value from Oracle APEX 4 Classic Report (row element from a table tags)如何从 Oracle APEX 4 经典报告中选择行元素值（表标签中的行元素）
【发布时间】：2012-07-17 15:49:52
【问题描述】：

这是挑战..

我有一个基于 Oracle APEX 4 中区域 1 的 SQL 的经典报告

报告 (Report1) 的结构类似于

    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

我想选择 Row1 的 DATE_COL 的值，即 Date1，并将其分配给可以在同一页面或另一页面上的 ITEM 的标签..

例如，ITEM 是 P_ITEM，其名称将在屏幕上显示为 12-01-2001

所以，基本上我想选择列 DATE_COL 的报告的第一个 Row1 元素并将其用作标签名称

然后我想选择 DATE_COL 的 Row2 元素，它是 DATE2，并分配给同一页面上另一个报告的 col1 标签，即 Report2，看起来像这样

 <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

请指导我如何完成这个。

示例 html 如下所示

<!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>

我猜JQuery可以用来完成，但不确定选择器需要如何使用。

谢谢， --CP

编辑 1

我基于 Tom 的 Jquery 选择器创建了以下脚本，该选择器确实选择了行元素。但是，我在 W3Schools html 编辑器中运行的以下脚本没有选择我放入 Test 函数的行元素。我在“A 标签”中调用的测试函数没有产生任何结果。然而，WelcomeMessage 的另一个功能确实产生了结果。谁能帮我找出错误？

<!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>

任何人都可以发现为什么测试函数没有检索到所需结果的错误吗？

【问题讨论】：

看起来很神秘。请举例说明结果的样子
我完全听不懂你的问题。是报告 1 中的 HTML 吗？如果是这样，报告 2 中的 HTML 在哪里？
抱歉混淆，html 是报告 1 的，尽管报告 1 示例只有一列和三列，但 html 有 1 行和 5 列。但是，报表 1 的结构并不重要，因为核心目标是从报表 1 表中选择值，然后分配给项目的标签或另一个报表的列标签。报告 2 的外观示例已经存在于问题中。为了标记，例如，报告 1 的 html 并用一些数字更改日期值的数据.. 你得到报告 2 html。如果不清楚，请告诉我。

标签： jquery row oracle-apex html-table

【解决方案1】：

理想情况下，您希望为您的区域分配一个静态 id（编辑区域 > 属性 > 静态 id）

然后使用

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

请注意 :eq 使用基于零索引的系统，因此第 0 行将是带有标题的行，而第 1 行将是包含实际数据的第一行。将 header_id 替换为您需要从中获取数据的列的标题。在您的示例中：

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

编辑：

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

编辑 2：因此，如果您想主动操作第二个报告的表头： - 为您的报告区域 2 分配一个静态区域 ID - 为区域（您的第二个区域）的“刷新后”事件创建动态操作。这对于允许在您的区域进行分页同时仍保持更改的标题是必要的。 - 对于真正的动作，选择一个执行 javascript 代码：

$("#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);
});

这会遍历第二个报告中的每个 TH 元素，并更改每个 th 的 html 内容：我们在每个元素中放置一个新的 A 标记。

编辑 3：您在实施中犯了一些错误：

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

应该是

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

i 是一个输入参数，你需要将它连接到选择器字符串中。

您的 HTML 脚本标签也是错误的。您调用 test 并为其提供“i”。 “我”是什么？它在任何地方都没有定义。提供一个值。（记住，这是行号。）

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

完整代码：

<!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>

【讨论】：

这很有帮助，因为我可以选择列值。现在，使用这个逻辑。我创建了一个 JS 函数。然后在锚元素中调用此函数，根据输入为锚分配标签。这里是标签逻辑 javascript:"test(1)" 。我在 html 编辑器中运行了它，但它不起作用..知道我做错了什么。谢谢
查看我编辑的帖子。不过，您可能需要澄清这一点：您是否打算向每一行添加“链接”（按钮、标签、列链接......）？看起来这将是关于如何处理行索引的后续评论。
不，我们无意将链接添加到列的每一行。目的是仅将链接添加到列标题，标签名称将从其他报告列值生成。例如报告 2 有一个标签为“11-01-2001”的列，该列将来自报告 1 的 column1 row2 值，如示例中所述。并且将有一个链接，单击该链接将转到另一个页面。但是在示例中，我只输入了“www.google.com”，因此标签名称应该来自 javascript 函数，并且只有列标题具有链接。希望现在更清楚了。很抱歉给大家带来了困惑。
查看我帖子的edit1。这应该对您有所帮助，但可能需要进行一些调试，并且您需要进行一些更改以使其适合您的需求。
谢谢，我将在我的应用程序中应用您的 edit2。我的问题是我在我的问题的编辑 1 中输入的代码是怎么来的，我在 W3Schools 的 HTML 编辑器中测试它不起作用。你能看看我添加到我的问题中的html作为编辑并提供你的输入..非常感谢..