javascript - 在 jsf 中使用 javascript 变量

Question

我想在点击时显示/隐藏我使用 javascript 函数的表格:

function changeTableStyle(){
    if(document.getElementById('incompleteMigratedTable').style.display=='none')
    {
        document.getElementById('incompleteMigratedTable').style.display = '';
    }
    else
    {
        document.getElementById('incompleteMigratedTable').style.display = 'none';
    }
}

默认情况下，样式 none 在页面加载时给出。在包含在这个文件中的其他文件中，我将按钮创建为

<h:CommandLink  id="show_details"
                onclick="changeTableStyle()"
                value="View"
                style="margin-left: 2px;font-weight:bold;color:blue;" >
    <f:ajax execute="@this"
            immediate="true"
            render="incompleteMigratedTable"
            event="click" ajaxSingle="true"
            />
</h:CommandLink>

此功能完美运行，但要求是当它显示表格时，按钮的文本应更改为“隐藏”，反之亦然。我们可以在 javascript 函数中创建一个变量并以某种方式在 h:commandLink 中使用它来实现这一点吗？

Answer 1

我会建议稍微更改您的 javascript，以便它可以用于多个对象(并更改您的 xhtml 以使用它)。

XHTML:

<h:CommandLink id="show_details"
               onclick="toggleVisibility(this,document.getElementById('incompleteMigratedTable'))"
               value="View"
               style=margin-left:2px;font-weight:bold;color:blue;">
  <f:ajax execute="@this"
          immediate="true"
          render="incompleteMigratedTable"
          event="click" ajaxSingle="true"/>
</h:CommandLink>

JavaScript:

function toggleVisibility(link,table) {
  if (table.style.display === 'none') {
    table.style.display = '';
    link.innerHTML = 'Hide';
  } else {
    table.style.display = 'none';
    link.innerHTML = 'Show';
  }
}