javascript - 单击行时如何突出显示 JSF 行

标签 javascript jsf

我有这个 JSF 表:

<h:dataTable id="itemsTable" 
    value="#{SelectionBean.selectedItems}" var="item"  >

<f:facet name="header">
  <h:outputText value="Items" />
</f:facet> 
<h:column>
  <f:facet name="header">
    <h:outputText value="Select" />
  </f:facet>
  <h:selectBooleanCheckbox value="#{item.selected}" />
</h:column>
<h:column>
  <f:facet name="header">
    <h:outputText value="name" />  
  </f:facet> 
    <h:outputText value="#{item.name}"></h:outputText>
</h:column>
</h:dataTable>

我想在单击时突出显示表格的行。有没有一种方法可以让 JavaScript 代码仅在单击复选框时突出显示行?

最佳答案

上面显示的代码是普通的 Java Server Faces(XHTML) 代码。因此最终它呈现为 HTML。在 HTML 中,如果数据表呈现在 ,在 jquery 的帮助下,您可以借助指定的 ID 或使用标签名称选择来轻松突出显示它。如果您需要有关 jquery 的进一步帮助以突出显示此链接可能会有用 jQuery highlight table row .

如果您正在使用 Rich faces,您可以使用 rich:jquery 标签来实现相同的目的,而不是使用外部 javascript 文件。

P.S 如果您使用带有丰富外观的外部文件来使用 jquery,请尝试在您的代码中使用 jquery.noconflict() 方法,因为 JSF 中的 prototype.js 可能会与您的代码冲突。

祝你好运!


更新

也许这段代码对你有帮助

<script type="javascript">

if($('.checkboxClass').attr('checked','checked')){

  $('tr').css('background-color','yellow');

 }
</script>

关于javascript - 单击行时如何突出显示 JSF 行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10601645/

相关文章:

javascript - 使用 Jest 模拟不需要的 React 组件

javascript - 在各个列中分配值

java - 当我将表单发布到另一个页面时,JSP 表单参数消失

jsf - 动态 Primefaces :tabView doesn't update

jsf - :selectItem inside ui:repeat - doesn't work

javascript - 从 Javascript 使用 Web 服务

javascript - 根据键值的存在从数组中删除元素

javascript - 如何将数组拆分为 m 和 n 大小的不同重复 block

java - 在 javascript 中使用 richfaces 迭代列表中的项目

Javascript - 显示 commandLink 然后消失