选中复选框时如何突出显示整行答案

【问题标题】：How to highlight entire row when the checkbox is selected选中复选框时如何突出显示整行
【发布时间】：2012-04-26 05:42:58
【问题描述】：

我有一个 JSF 数据表。当我选择相应的复选框时，我想突出显示该行。我必须如何编辑 JavaScript 代码才能达到这种效果？

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"    
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <ui:insert name="header">           
            <ui:include src="header.xhtml"/>         
        </ui:insert>
        <script type="text/javascript" src="resources/js/jquery-1.7.2.min.js"></script>
    </h:head>
    <h:body>

        <h1><img src="resources/css/images/icon.png" alt="NVIDIA.com" /> History Center</h1>
        <!-- layer for black background of the buttons -->
        <div id="toolbar" style="margin: 0 auto; width:1180px; height:30px; position:relative;  background-color:black">
            <!-- Include page Navigation -->
            <ui:insert name="Navigation">           
                <ui:include src="Navigation.xhtml"/>         
            </ui:insert>

        </div>  

        <div id="greenBand" class="ui-state-default ui-corner-allh" style="position:relative; top:35px; left:0px;"> 
            <h:graphicImage alt="Dashboard"  style="position:relative; top:-20px; left:9px;"  value="resources/images/logo_sessions.png" />
        </div>
        <div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute;  background-color:transparent; top:105px">

            <div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute;  background-color:transparent; top:80px">

                <div id="settingsHashMap" style="width:750px; height:400px; position:absolute;  background-color:r; top:20px; left:1px">

                    <h:form id="form">

                        <!-- The sortable data table -->
                        <h:dataTable id="dataTable" value="#{SessionsController.dataList}" var="item">

                            <h:column>
                                <f:facet name="header">
                                    <h:commandLink value="Account Session ID" actionListener="#{SessionsController.sort}">
                                        <f:attribute name="sortField" value="Account Session ID" />
                                    </h:commandLink>
                                </f:facet>
                                <h:outputText value="#{item.aSessionID}" />
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:commandLink value="User ID" actionListener="#{SessionsController.sort}">
                                        <f:attribute name="sortField" value="User ID" />
                                    </h:commandLink>
                                </f:facet>
                                <h:outputText value="#{item.userID}" />
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:commandLink value="Activity Start Time" actionListener="#{SessionsController.sort}">
                                        <f:attribute name="sortField" value="Activity Start Time" />
                                    </h:commandLink>
                                </f:facet>
                                <h:outputText value="#{item.activityStart}" />
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:commandLink value="Activity End Time" actionListener="#{SessionsController.sort}">
                                        <f:attribute name="sortField" value="Activity End Time" />
                                    </h:commandLink>
                                </f:facet>
                                <h:outputText value="#{item.activityEnd}" />
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:commandLink value="Activity" actionListener="#{SessionsController.sort}">
                                        <f:attribute name="sortField" value="Activity" />
                                    </h:commandLink>
                                </f:facet>
                                <h:outputText value="#{item.activity}" />
                            </h:column>
                        </h:dataTable>

                        <!-- The paging buttons -->
                        <h:commandButton value="first" action="#{SessionsController.pageFirst}"
                                         disabled="#{SessionsController.firstRow == 0}" />
                        <h:commandButton value="prev" action="#{SessionsController.pagePrevious}"
                                         disabled="#{SessionsController.firstRow == 0}" />
                        <h:commandButton value="next" action="#{SessionsController.pageNext}"
                                         disabled="#{SessionsController.firstRow + SessionsController.rowsPerPage >= SessionsController.totalRows}" />
                        <h:commandButton value="last" action="#{SessionsController.pageLast}"
                                         disabled="#{SessionsController.firstRow + SessionsController.rowsPerPage >= SessionsController.totalRows}" />
                        <h:outputText value="Page #{SessionsController.currentPage} / #{SessionsController.totalPages}" />
                        <br />

                        <!-- The paging links -->
                        <ui:repeat value="#{SessionsController.pages}" var="page">
                            <h:commandLink value="#{page}" actionListener="#{SessionsController.page}"
                                           rendered="#{page != SessionsController.currentPage}" />
                            <h:outputText value="#{page}" escape="false"
                                          rendered="#{page == SessionsController.currentPage}" />
                        </ui:repeat>
                        <br />

                        <!-- Set rows per page -->
                        <h:outputLabel for="rowsPerPage" value="Rows per page" />
                        <h:inputText id="rowsPerPage" value="#{SessionsController.rowsPerPage}" size="3" maxlength="3" />
                        <h:commandButton value="Set" action="#{SessionsController.pageFirst}" />
                        <h:message for="rowsPerPage" errorStyle="color: red;" />

                    </h:form>                  

                </div>   

                <div id="settingsdivb" style="width:350px; height:400px; position:absolute;  background-color:transparent; top:20px; left:800px">

                </div>   
            </div>  
        </div>

        <script type="text/javascript">
              $("tr").not(':first').hover(
              function () {
                $(this).css("background","#787878");
              }, 
              function () {
                $(this).css("background","");
              }
            );
        </script>


    </h:body>
</html>

【问题讨论】：

您能否发布生成页面的“查看源代码”输出的 sn-p？只要其中一行（包括复选框）返回就可以了。
这是HTML源代码：pastebin.com/XcQ4v2MP

标签： java javascript jquery html jsf-2

【解决方案1】：

我无法确定您的复选框在哪里或它们的名称是什么，但是我确实注意到您在脚本中使用了 jQuery。我创建了一个简短的 jsFiddle demo 来向您展示您可以使用 jQuery 做什么。在我的示例中，我创建了一个 .highlight 类，我将 background-color 设置为我想要的颜色。在 jQuery 中，我对所有复选框进行分组，并为它们附加一个 .change() 处理程序，我在每次点击时都会打开/关闭突出显示类。

Check out the jsFiddle demo

HTML：

<div id="row-1"><input type="checkbox" id="chk-1" />Row 1</div>
<div id="row-2"><input type="checkbox" id="chk-2" />Row 2</div>
<div id="row-3"><input type="checkbox" id="chk-3" />Row 3</div>
<div id="row-4"><input type="checkbox" id="chk-4" />Row 4</div>

CSS：

div
{
    display: block;
    height: 20px;
    padding: 20px;
    border-bottom: dashed 1px #000;
}

input
{
    margin-right: 10px;
}

.highlight
{
    background-color: yellow;
}

jQuery:

$("input[type=checkbox]").on("change", function() {

    var $chk = $(this),
        num = $chk.attr("id").substring(4),
        $row = $("#row-" + num);

    $row.toggleClass("highlight");

});

输出：

【讨论】：

你确定我可以将 div 放入 JSF h:datatable 中吗？

【解决方案2】：

我使用 jQuery 的方法是这样的：

            <p:column >
                <h:selectBooleanCheckbox onclick="highlight(this)" />
            </p:column>

在您的 CSS 文件中创建 .highlighted 类：

.highlighted {
    background-color: red;
}

最后是实际功能：

          function highlight(param) {  
            var row = jQuery(param).parent().parent(); //children() available as well
                row.toggleClass('highlighted');
          }

您只需获得点击的checkbox 的row 并处理CSS class 的分配。直截了当。

编辑：当然.parent() 的数量取决于您的html 元素组成。编辑了函数以适合您的情况，我已经尝试使用不同的元素组合。

【讨论】：

.toggleClass() 可以避免整个 if 语句。
@Scott 事实，我会尽快纠正。感谢您指出这一点！
您的代码有效：pastebin.com/6MTewWdg 但有一个问题 - 当我单击复选框时，表格中的每一行都会突出显示。问题是每一行都有相同的ID。如何为 JSF 数据表中的每一行生成唯一 ID？
根据您的作文，从脚本中删除一个 .parent() 。问题不在于 id，标准 JSF 2.0 h:dataTable 根本不向行添加 id。问题是您应该使用 .parent() 再提高 1 级（在 html 元素树中）。
我看到代码有一个问题。 h:datatable 使用分页。当我切换到第二页然后我返回到第一页时，所选行丢失（未选中）。不会记住有关所选页面的信息。当我切换到其他页面并返回时，h:datatable 如何记住选定的行？

【解决方案3】：

以下是我为使 Javascript 在选中复选框时更改背景颜色所做的示例：

<html>
    <body>
        <table>
            <tr id="changeme1">
                <td><input type="checkbox" onclick="highlight('changeme1');" /></td>
                <td>Test Box</td>
            </tr>
            <tr id="changeme2">
                <td><input type="checkbox" onclick="highlight('changeme2');" /></td>
                <td>Test2</td>
            </tr>
        </table>
        <script>
        function highlight(id)
        {
            object = document.getElementById(id).style.backgroundColor;
            if(object == "yellow")
            {
                document.getElementById(id).style.backgroundColor = "white";
            }else{
                document.getElementById(id).style.backgroundColor = "yellow";
            }
        }
        </script>
    </body>
</html>

【讨论】：

我试过你的建议：pastebin.com/mC2yrj4a 它不起作用。也许有一个错误。