Rich Datatable單擊時突出顯示選定的行復選框

Question

我有數據表，我想突出顯示選中行以使用Rich Faces框架在jsf中的“單擊復選框”（列0）時

我的jquery腳本應該如何？

<rich:dataTable id="modelList" value="#{bean.modelList}" var="model" rows="#{bean.dataTableRowCountEachPage}"  rowClasses="odd-row,even-row">
            <rich:column width="20px">
                <f:facet name="header">
                    <h:outputText value="Select" />
                </f:facet>
                <h:selectBooleanCheckbox  class="checkboxClass" value="#{model.selected}">
                    <f:ajax event="click" listener="#{bean.getSelectedItems}" render=":tableForm:res" />
                </h:selectBooleanCheckbox>
            </rich:column>

            <rich:column sortBy="#{model.applicationName}" filterValue="#{model.applicationName}" filterExpression="#{fn:containsIgnoreCase(model.applicationName,bean.applicationNameFilter)}">
                <f:facet name="header">
                    <h:panelGroup>
                        <h:outputText value="Application Name" />

                        <h:inputText value="#{bean.applicationNameFilter}">
                            <a4j:ajax event="blur" render="modelList" execute="@this" />
                        </h:inputText>
                    </h:panelGroup>
                </f:facet>
                <h:outputText value="#{model.applicationName}" />
            </rich:column>  

    </h:form>

我正在使用此CSS查詢

<script>
        $(document).ready(function(){
                          $("checkboxButton").click(function(){
                                            $("tr").toggleClass("selected");
                                            });
                          });
        </script>



<style>
.selected
{

.rf-dt-c:select-checkbox{
                background-color: #f7dbdb;
        }

}
</style>

此查詢工作錯誤方式突出顯示所有行

Answer 1

我現在處理。 我用了這個腳本

<script>
$('.checkboxClass').each(function (index, item) {
        if ($(item).is(':checked')==true) {

        var row = $('.rf-dt-r')[index];

        $(row).css('background-color', '#f7dbdb');
    }
    });

</script>