Ola pessoal, sou iniciante em jsf gostaria mudar a cor do fundo de um datatable usando seu onclick, ou seja quando o usuario clicar em uma linha mudar a cor dela. como eu posso fazer isso?
segue meu DataTable
<h:dataTable id="tblListaPessoa"
value="#{mbPessoa.listaPessoa}"
var="pessoa"
border="1"
width="615"
headerClass="cabecalhoDataTable"
bgcolor="white">
<h:column >
<f:facet name="header" >
<h:outputText style="color:black" value="Id" />
</f:facet>
<h:outputText value="#{pessoa.id}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText style="color:black" value="Nome" />
</f:facet>
<h:outputText value="#{pessoa.nome}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText style="color:black" value="Rg"/>
</f:facet>
<h:outputText value="#{pessoa.rg}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText style="color:black" value="Cpf"/>
</f:facet>
<h:outputText value="#{pessoa.cpf}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText style="color:black" value="Cep"/>
</f:facet>
<h:outputText value="#{pessoa.cep}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText style="color:black" value="Tipo Pessoa"/>
</f:facet>
<h:outputText value="#{pessoa.tipoPessoa}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText style="color:black" value="Sexo"/>
</f:facet>
<h:outputText value="#{pessoa.sexo}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText style="color:black" value="Data de Nascimento"/>
</f:facet>
<h:outputText value="#{pessoa.dataNascimento}">
<f:convertDateTime pattern="dd/MM/yyyy" />
</h:outputText>
</h:column>
<h:column >
<f:facet name="header">
<h:outputText style="color:black" value="Apagar Registro"/>
</f:facet>
<h:commandButton value="Apagar"
action="#{mbPessoa.apagar}"
immediate="true">
<f:setPropertyActionListener target="#{mbPessoa.pessoa}"
value="#{pessoa}"/>
</h:commandButton>
</h:column>
Tente assim:
Coloque uma String no seu bean que vai armazenar a cor.
private String colorDataTable;
No bgcolor do dataTable coloque assim:
bgcolor="#{yourBean.colorDataTable}"
E na action do seu botão, altere a cor da string que automaticamente alterará do dataTable
Então mais eu queria no ONCLICK da linha da tabela sabe? tipow dependendo da linha que o usuario clicar na tabela essa linha fica com outra cor
Obrigado por responder
Então usa o seguinte:
No botão:
onclick="alterarCor();"
No Script:
<script>
function alterarCor() {
document.getElementById('idComponente').style.backgroundColor="red";
}
</script>
Então muito obrigado de estar me ajudando é que eu não conheço javascript, usava java swing
mais eu tentei testar esse exemplo e não funciono
esse idComponente é o que?
e esse document?
mesmo ctrl+c e ctrlv não funciona
Obrigado
vc deve colocar um id na sua column
assim:
<h:column id="teste">
...
Não sei se vc quer usar um botão para alterar a cor mas se for coloque no onclick dele a chamada à função javascript:
<h: commandButton onclick="alterarCor();">
E na sua página adicionar um javascript. (Gosto de colocar em um arquivo separado, mas só para exemplo coloque em sua página mesmo)
O idComponente será o id da sua column e o document refere-se a página atual ativa no browser.
Informo que quero pegar o componente da pagina que contem o id descrito e quero alterar o estilo.
[code][/code]
Espero ter ajudado
page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%--
This file is an entry point for JavaServer Faces application.
--%>
<f:view>
<html>
<head>
<style type="text/css">
.cabecalhoDataTable {
background-color:#CAE1FF;
}
.titulo {
color: black;
font-weight:bold;
}
</style>
<script LANGUAGE="JavaScript" TYPE="text/javascript">
function alterarCor() {
document.getElementById('idc').style.backgroundColor="red";
}
</script>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
function confirmaExclusao(){
decisao = confirm("Deseja excluir este registro!");
if (decisao){
alert ("exclusão realizada com sucesso!");
}
}
</SCRIPT>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Cadastro de Clientes</title>
</head>
<body>
<h:panelGrid border="1"
columns="1"
width="697"
bgcolor="#FFFFF0">
<h:outputText styleClass="titulo"
value="Cadastro de Clientes"/>
</h:panelGrid>
<h:panelGrid bgcolor="#FFFFF0"
border="1"
columns="1">
<h:form id="frmCadastroCliente">
<h:panelGrid border="0"
cellpadding="3"
cellspacing="3"
id="pnlCliente"
columns="4"
width="680">
<h:outputLabel for="itxNome"
value="Nome :"/>
<h:inputText id="itxNome"
value="#{mbPessoa.pessoa.nome}"
required="true"/>
<h:outputLabel for="itxRg"
value="Rg :"/>
<h:inputText id="itxRg"
value="#{mbPessoa.pessoa.rg}"
required="true">
<f:validateLength maximum="8"
minimum="8"/>
</h:inputText>
<h:outputLabel for="itxCpf"
value="Cpf :"/>
<h:inputText id="itxCpf"
value="#{mbPessoa.pessoa.cpf}"
required="true">
<f:validateLength maximum="11"
minimum="11"/>
</h:inputText>
<h:outputLabel for="itxCep"
value="Cep :"/>
<h:inputText id="itxCep"
value="#{mbPessoa.pessoa.cep}"
required="true">
<f:validateLength maximum="8"
minimum="8"/>
</h:inputText>
<h:outputLabel for="somnTpPessoa"
value="Tipo Pessoa :"/>
<h:selectOneMenu id="somnTpPessoa"
value="#{mbPessoa.pessoa.tipoPessoa}">
<f:selectItem itemLabel="Fisica"
itemValue="Física"/>
<f:selectItem itemLabel="Jurídica"
itemValue="Jurídica"/>
</h:selectOneMenu>
<h:outputLabel for="somnSexo"
value="Sexo : "/>
<h:selectOneRadio id="somnSexo"
value="#{mbPessoa.pessoa.sexo}" required="true">
<f:selectItem itemLabel="Masculino"
itemValue="Masculino"/>
<f:selectItem itemLabel="Femenino"
itemValue="Femenino"/>
</h:selectOneRadio>
<h:outputLabel for="itxDataNascimento"
value="Data Nascimento :"/>
<h:inputText id="itxDataNascimento"
value="#{mbPessoa.pessoa.dataNascimento}"
required="true">
<f:convertDateTime pattern="dd/MM/yyyy" />
</h:inputText>
</h:panelGrid>
<br><br>
<h:panelGrid border="1"
columns="1"
cellpadding="5"
width="687">
<h:column>
<h:commandButton id="btnVoltar"
value="Voltar"/>
  
<h:commandButton id="btnSalvar"
value="Gravar"
action="#{mbPessoa.gravar}"/>
  
<h:commandButton id="btnLimparFormulario"
type="reset"
value="Limpar Formulário"
immediate="true"/>
</h:column>
</h:panelGrid>
<h:panelGrid width="680">
<h:message for="itxNome"
style="color: red"/>
<h:message for="itxRg"
style="color: red"/>
<h:message for="itxCpf"
style="color: red"/>
<h:message for="itxCep"
style="color: red"/>
<h:message for="somnSexo"
style="color: red"/>
<h:message for="itxDataNascimento"
style="color: red"/>
<h:outputText styleClass="titulo" value="Lista de Pessoa"/>
<h:dataTable id="tblListaPessoa"
value="#{mbPessoa.listaPessoa}"
var="pessoa"
border="1"
width="680"
headerClass="cabecalhoDataTable"
bgcolor="white"
onclick="alterarCor();">
<h:column id="idc" >
<f:facet name="header" >
<h:outputText style="color:black" value="Id" />
</f:facet>
<h:outputText value="#{pessoa.id}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText style="color:black" value="Nome" />
</f:facet>
<h:outputText value="#{pessoa.nome}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText style="color:black" value="Rg"/>
</f:facet>
<h:outputText value="#{pessoa.rg}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText style="color:black" value="Cpf"/>
</f:facet>
<h:outputText value="#{pessoa.cpf}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText style="color:black" value="Cep"/>
</f:facet>
<h:outputText value="#{pessoa.cep}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText style="color:black" value="Tipo Pessoa"/>
</f:facet>
<h:outputText value="#{pessoa.tipoPessoa}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText style="color:black" value="Sexo"/>
</f:facet>
<h:outputText value="#{pessoa.sexo}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText style="color:black" value="Data de Nascimento"/>
</f:facet>
<h:outputText value="#{pessoa.dataNascimento}">
<f:convertDateTime pattern="dd/MM/yyyy" />
</h:outputText>
</h:column>
<h:column >
<f:facet name="header">
<h:outputText style="color:black"
value="Apagar Registro"/>
</f:facet>
<h:commandButton value="Apagar"
action="#{mbPessoa.apagar}"
immediate="true">
<f:setPropertyActionListener target="#{mbPessoa.pessoa}"
value="#{pessoa}"/>
</h:commandButton>
</h:column>
<h:column >
<f:facet name="header">
<h:outputText style="color:black" value="Alterar Registro"/>
</f:facet>
<h:commandButton value="Alterar"
action="#{mbPessoa.irAlterar}"
immediate="true">
<f:setPropertyActionListener target="#{mbPessoa.pessoa}"
value="#{pessoa}"/>
</h:commandButton>
</h:column>
</h:dataTable>
<h:panelGrid border="1"
columns="1"
width="680">
<h:column>
<h:commandButton id="btnApagarTudo"
value="Apagar Todos"
action="#{mbPessoa.apagarTodos}"
immediate="true">
</h:commandButton>
</h:column>
</h:panelGrid>
</h:panelGrid>
</h:form>
</h:panelGrid>
</body>
</html>
</f:view>
segue meu jsf... = vc falo mais não funciona
Verifica no html gerado qual o id da coluna idc.
Ele deve estar concatenado com o nome do form e do dataTable.
Ai vc altera a funcao alterarCor() pra pegar o elemento do id correto.