Java 选中复选框时如何高亮显示整行
我有一个JSF数据表。我想在选中相应复选框时高亮显示该行。我必须如何编辑JavaScript代码才能达到这种效果Java 选中复选框时如何高亮显示整行,java,javascript,jquery,html,jsf-2,Java,Javascript,Jquery,Html,Jsf 2,我有一个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.o
<?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>
下面是一个示例，说明我在选中复选框时如何让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>
下面是一个示例，说明我在选中复选框时如何让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>
我真的不知道你的复选框在哪里或者它们的名字是什么，但是我注意到你在脚本中使用了jQuery。我创建了一个简短的示例，向您展示如何使用jQuery。在我的示例中，我创建了一个.highlight类，在其中我将背景颜色设置为我想要的颜色。在jQuery中，我对所有复选框进行分组，并将一个处理程序附加到它们上，每次单击时我都会打开/关闭highlight类 HTML: 一排 第2排 第3排 第4排 CSS: div { 显示：块； 高度：20px； 填充：20px； 边框底部：虚线1px 000； } 输入 { 右边距：10px； } 突出 { 背景颜色：黄色； } jQuery： $input[type=checkbox].onchange，函数{ var$chk=$this， num=$chk.attrid.substring4， $row=$row-+num； $row.toggleClasshighlight； }; 输出：
我真的不知道你的复选框在哪里或者它们的名字是什么，但是我注意到你在脚本中使用了jQuery。我创建了一个简短的示例，向您展示如何使用jQuery。在我的示例中，我创建了一个.highlight类，在其中我将背景颜色设置为我想要的颜色。在jQuery中，我对所有复选框进行分组，并将一个处理程序附加到它们上，每次单击时我都会打开/关闭highlight类 HTML: 一排 第2排 第3排 第4排 CSS: div { 显示：块； 高度：20px； 填充：20px； 边框底部：虚线1px 000； } 输入 { 右边距：10px； } 突出 { 背景颜色：黄色； } jQuery： $input[type=checkbox].onchange，函数{ var$chk=$this， num=$chk.attrid.substring4， $row=$row-+num； $row.toggleClasshighlight； }; 输出：
我使用jQuery的方法是：
<p:column >
<h:selectBooleanCheckbox onclick="highlight(this)" />
</p:column>
function highlight(param) {
var row = jQuery(param).parent().parent(); //children() available as well
row.toggleClass('highlighted');
}
编辑：当然。父元素的数量取决于html元素的组成。编辑函数以适合您的情况，我尝试了不同的元素组合。我使用jQuery的方法如下：
<p:column >
<h:selectBooleanCheckbox onclick="highlight(this)" />
</p:column>
function highlight(param) {
var row = jQuery(param).parent().parent(); //children() available as well
row.toggleClass('highlighted');
}
编辑：当然。父元素的数量取决于html元素的组成。编辑函数以适应您的情况，我尝试了不同的元素组合。您能发布生成页面的视图源的输出片段吗？对于包含复选框的其中一行，返回什么就可以了。这是HTML源代码：您可以发布一个来自生成页面的视图源的输出片段吗？包含复选框的其中一行返回的内容就可以了。这是HTML源代码：整个if语句将被避免使用。@Scott true fact，我将尽快更正它。谢谢你指出这一点！您的代码可以工作：但有一个问题-当我单击复选框时，表中的每一行都会高亮显示。问题是每一行都有相同的id。如何为JSF数据表中的每一行生成唯一的id？根据您的组合，从脚本中删除一个.parent。问题不在于ids，标准JSF2.0H:dataTable根本不向行添加ID。问题是，正如在html元素树中应该做的那样，使用.parent将更高一级。我看到了代码中的一个问题。h:datatable使用分页。当我切换到第二页，然后返回到第一页时，选中的行将被选中。有关所选页面的信息不会被记住。当我切换到另一个页面并返回时，h:datatable如何记住所选的行？使用@Scott true fact可以避免整个if语句，我将尽快更正它。谢谢你指出这一点！您的代码可以工作：但有一个问题-当我单击复选框时，表中的每一行都会高亮显示。问题是每一行都有相同的id。如何为JSF数据表中的每一行生成唯一的id？根据您的组合，从脚本中删除一个.parent。问题不在于ids，标准JSF2.0H:dataTable根本不向行添加ID。问题是，正如在html元素树中应该做的那样，使用.parent将更高一级。我看到了代码中的一个问题。h:datatable使用分页。当我切换到第二页，然后返回到第一页时，选中的行将被选中。有关所选页面的信息不会被记住。我是如何看待h:d的
当我切换到其他页面并返回时，atatable可以记住所选的行吗？我尝试了你的建议：它不起作用。也许有个bug。我试过你的建议：它不起作用。可能有一个bug。你确定我可以将div放入JSF h:datatable吗？你确定我可以将div放入JSF h:datatable吗？