0

这里是挑战..

我有一个基于 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>

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

4

1 回答 1

0

理想情况下，您希望为您的区域分配一个静态 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>
于 2012-07-02T07:11:50.277 回答