Pegar id da linha de uma tabela dinamica e mudar classe

6 de janeiro de 2013 3 respostas

izabel.rodrigues 6 de janeiro de 2013

Pessoal,
tenho uma tabela gerada usando um foreach

<div id="gridPDT">				
			<table class="list tbPDT" border="1" cellspacing="0" cellpadding="2" bordercolor="#638252" width="100%">
				<tr class="tableHeader">
					<td align="center" nowrap="nowrap" height="10px"></td>
					<td align="center" nowrap="nowrap" height="10px"><bean:message key="msg.sequencialGridPDT.pdtStatus"/></td>
					<td align="center" nowrap="nowrap" height="10px"><bean:message key="msg.sequencialGridPDT.num_atividade"/></td>
					<td align="center" nowrap="nowrap" height="10px"><bean:message key="msg.sequencialGridPDT.cod_atividade"/></td>
					<td align="center" nowrap="nowrap" height="10px"><bean:message key="msg.sequencialGridPDT.hora_apresentacao"/></td>
				</tr>
<c:forEach items="${listaPDT}" var="pdt" varStatus="contador">
					<c:if test="${contador.count % 2 == 0}">
						<c:set var="class" value="tableEvenLine" />
					</c:if>
					<c:if test="${contador.count % 2 == 1}">
						<c:set var="class" value="tableOddLine" />
					</c:if>
					<tr class="<c:out value="${class}"/>">
                                                <td nowrap="nowrap" align="center">
							<input type="checkbox" name="pdtSelecionado" value="<c:out value="${pdt.pk}"/>"/>
						</td>
						<td nowrap="nowrap" align="center">
							<input type="checkbox" name="pdtStatus" id="<c:out value="${contador.count}"/>"/>
						</td> 
					</tr>
</c:forEach>
</table>
</div>

Preciso de pegar a linha do checkbox selecionado e mudar a class dela.
Para fazer isso tentei usar Jquery:

$('input[name=pdtStatus]').click(function() {
	$("#gridPDT tr").addClass("tableInactiveLine");	
});

Mas o resultado é que ele esta colocando a classe na primeira linha da tabela e não na que contem o checkbox selecionado. Pensei na idéia de colocar o id na linha igual ao do checkbox e depois compará-lo mas não sei como fazer.
Alguém poderia me auxiliar nessa questão?

3 Respostas

Mathe 9 de jan. de 2013

Amigo da um Id para seu checkbox, coloca um evento onclick nesse seu id dentro do seu javascript vamos ao código:

var id = document.getElementById("IdDoElemento");

id.onclick(){
   id.className = "NomeDaClasse"; 
}

Tente dessa maneira ai se não der, tente com uma pequena gambiarra chamando a função dentro do seu html dessa maneira :

<input type="checkbox" name="option1" value="asdasd" onClick="MudaCorDeFundo(this);"> ASDKOP<br>
 
 MudaCorDeFundo(this){
  this.className = "NomeDaClasse"; 
}

Beto_Sagaz 9 de jan. de 2013

Vc também pode usar árvore transversal do jquery, eu faria dessa forma:

$('input[name=pdtStatus]').click(function() { //$("#gridPDT tr").addClass("tableInactiveLine"); $(this).closest("tr").addClass("tableInactiveLine"); });
Dá uma olhada na API: http://api.jquery.com/category/traversing/tree-traversal/

izabel.rodrigues 10 de jan. de 2013

Valeu ai pessoal,
Resolvi o problema com

$(this).parent().parent().attr('class', 'tableEvenLine');

Segue o código completo:

$("input[name='pdtStatus']").click(function() {

	var idcheck = $(this).attr("id");

	if ($(this).is(':checked')){

		$(this).parent().parent().attr('class', 'tableInactiveLine');
		$("#pdt" + idcheck).attr('disabled','disabled');
	}
	else{
		
		$("#pdt" + idcheck).removeAttr('disabled');
		if ((idcheck % 2) == 0){
			$(this).parent().parent().attr('class', 'tableEvenLine');
		}
		else{
			$(this).parent().parent().attr('class', 'tableOddLine');
		}
	}
});

Essa função ai de árvore transversal é bastante interessante também.

Criado 6 de janeiro de 2013

Ultima resposta 10 de jan. de 2013

Respostas 3

Participantes 3

3 Respostas

Topicos relacionados