使表格形式动态化

Question

我在表格表格上有一个复选框。如果没有填写提交日期，我需要能够隐藏它，并在有日期时显示它。单击复选框后，我需要根据单击的复选框或单击更新按钮更新另一个字段。这是否可以在版本4.2中的Oracle Apex表格形式上实现？

Answer 1

您可以在表格表单字段上创建动态操作，但是您需要了解一些Javascript / jQuery / DOM内容，因为它无法以声明方式完成页面项目。

作为一个例子，我在EMP表上创建了一个简单的表格形式：

使用浏览器的Inspect Element工具，我可以看到第3行的Ename字段的HTML如下所示：

<input type="text" name="f03" size="12" maxlength="2000" value="Ben Dev"
    class="u-TF-item u-TF-item--text " id="f03_0003" autocomplete="off">

要注意的相关位是名称＆＃34; f03＆＃34;和ID＆＃34; f03_0003＆＃34;。对于所有表格形式字段，名称表示列，并且对于该列中的所有字段都相同。 ID由名称加上表示行的字符串组成 - 在这种情况下＆＃34; _0003＆＃34;代表第3行。

同样，Hiredate字段全部命名为＆＃34; f004＆＃34;并拥有像＆＃34; f04_0003＆＃34;。

这样的ID

有了这些信息，我们可以编写动态动作。例如，让我们说每当Ename为空时，应该隐藏Hiredate，否则显示。在伪代码中：

每当一个名为＆＃34; f03＆＃34;的元素时被更改，名称为＆＃34; f04＆＃34;应隐藏或显示同一行。

因此我们可以使用像这样的When条件创建一个synamic动作：

• 事件=更改
• 选择类型= jQuery选择器
• jQuery selector = input [name =＆＃34; f03＆＃34;]

即。每当输入名称为＆＃34; f03＆＃34;改变了，解雇了这个动作。

执行的操作必须是＆＃34;执行Javascript代码＆＃34;，代码可以是：

// Get the ID of this item e.g. f03_0004
var this_id = $(this.triggeringElement).attr('id');
// Derive the ID of the corresponding Hiredate item e.g. f04_0004
var that_id = 'f04'+this_id.substr(3);

if ($(this.triggeringElement).val() == "") {
    // Ename is empty so hide Hiredate
    $('#'+that_id).closest('span').hide();
} else {
    // Ename is not empty so show Hiredate
    $('#'+that_id).closest('span').show();
}

因为Hiredate是一个日期选择器，我需要隐藏/显示字段本身及其日期选择器图标。我选择通过隐藏/显示包含它们的范围来实现此目的。这段代码本来可以用很多种方式编写。

您可以采用类似的技巧来实现您的目标，但正如您所看到的那样，它并不容易。