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

Question

我有这个 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 代码仅在单击复选框时才突出显示行？

Answer 1

您显示的上述代码是一个普通的 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 可能与您的代码冲突。

祝你好运！

---

更新

也许这段代码 sn-p 对你有帮助

<script type="javascript">

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

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

 }
</script>