Selecionar ID's da mesma linha tr da tabela html com jquery
Bom dia pessoal,
Estou criando um sistema simples para a empresa controlar o horário do funcionário, na parte do admin tem uma opção para ajustar o horário do funcionário como mostra o exemplo abaixo.
/applications/core/interface/imageproxy/imageproxy.php?img=http://bitfarma.com.br/fcce15f4cad5a96009dfc9d2a5c2807a/fcce15f4cad5a96009dfc9d2a5c2807a.jpg&key=162239a4fe4dde567c89754b8c92e7f1487227674b1406fb531c0744b50873f7" alt="fcce15f4cad5a96009dfc9d2a5c2807a.jpg" />
Quando clico no botão editar ilustrado pela img do láis é habilitado os campos inputs para alterar os horários, edito e salvo na mesma linha da tabela html, Todo esse procedimento consigo realizar com apenas uma linha na tabela usando o jquery, porém serão criadas várias linhas(dinamicamente php+mysql) para que o operador escolha a que deseja alterar, gostaria de selecionar através do jquery a linha que foi clicada no botao edite e habilitar os inputs da mesma para realizar o procedimento.
<table width="950" border="0" cellspacing="5" cellpadding="0" id="ajustehr">
<thead>
<tr>
<td height="27" colspan="8" style="padding:10px; border-bottom:1px solid #666;">Funcionário: <b><?php echo $l['nome']; ?></b></td>
</tr>
<tr>
<td width="84" align="center" style="padding:10px; border-bottom:1px solid #666;">Data</td>
<td width="83" align="center" style="padding:10px; border-bottom:1px solid #666;">Hora1</td>
<td width="129" align="center" style="padding:10px; border-bottom:1px solid #666;">Hora2</td>
<td width="129" align="center" style="padding:10px; border-bottom:1px solid #666;">Hora3</td>
<td width="129" align="center" style="padding:10px; border-bottom:1px solid #666;">Hora4</td>
<td width="129" align="center" style="padding:10px; border-bottom:1px solid #666;">Editar Horário</td>
</tr>
</thead>
<tbody>
<?php
while($r = mysql_fetch_array($sql_funcionario_executar)){
?>
<tr>
<td align="center"><?php echo databr($r['data']); ?>
<input type="hidden" value="<?php echo $r['data']; ?>" id="dtr" />
<input type="hidden" value="<?php echo $l['codigo']; ?>" id="id_user" /></td>
<td align="center"><input name="hr1" id="hr1" type="text" value="<?php echo $r['hora1']; ?>" readonly="readonly" /></td>
<td align="center"><input name="hr2" id="hr2" type="text" value="<?php echo $r['hora2']; ?>" readonly="readonly" /></td>
<td align="center"><input name="hr3" id="hr3" type="text" value="<?php echo $r['hora3']; ?>" readonly="readonly" /></td>
<td align="center"><input name="hr4" id="hr4" type="text" value="<?php echo $r['hora4']; ?>" readonly="readonly" /></td>
<td align="center"><img src="img/1368548404_badge_edit.png" width="32" height="32" class="btn_edit" />
<div class="step2"><img src="img/accept.png" width="32" height="32" id="btn_save" style="padding-right:10px;" /> <img src="img/cancel.png" width="32" height="32" id="btn_cancel" /></div></td>
</tr>
<?php } ?>
</tbody>
<tfoot>
<tr>
<td colspan="6" align="center" class="c-tfoot"></td>
</tr>
</tfoot>
</table>
Script onde habilito os inputs[text] para edição.
$('tr .btn_edit').click(function(){
//console.log(this);
$('#hr1').attr('readonly',false);
$('#hr2').attr('readonly',false);
$('#hr3').attr('readonly',false);
$('#hr4').attr('readonly',false);
$('#hr1').css({border:"1px solid #069"});
$('#hr2').css({border:"1px solid #069"});
$('#hr3').css({border:"1px solid #069"});
$('#hr4').css({border:"1px solid #069"});
$('#hr1').focus();
$(this).css({display:"none"});
$('.step2').css({display:"block"});
});
Desde já agradeço,
Vitor Molina
Discussão (2)
Carregando comentários...