Bom dia. Tenho a seguinte tabela PAI X FILHO.
<tbody id="pagamentoslista">
<tr class="tableBodyRow">
<td style="margin-right: 50px; vertical-align: middle; text-align: center; padding-top:5px; padding-bottom: 5px;">
<div class="col-sm-28 form-input">
<input
type="zoom"
id = "nome"
name="nome"
data-zoom="{
'displayKey':'RA_NOME',
'datasetId':'ds_sra140',
'maximumSelectionLength':'1',
'resultLimit': '5',
'placeholder':'Escolha o colaborador',
'fields':[
{
'field':'RA_NOME',
'label':'Nome',
'standard':'true'
}
]
}"
/>
</div>
</td>
<td style="margin-right: 50px; vertical-align: middle; text-align: center; padding-top:5px; padding-bottom: 5px;">
<div class="col-sm-4 form-input" >
<input type="text" name="iniciohe" class="time form-control" >
</div>
</td>
<td style="margin-left: 50px; vertical-align: middle; text-align: center; padding-top:5px; padding-bottom: 5px;">
<div class="col-sm-4 form-input">
<input type="text" name="fimhe" class="time form-control">
</div>
</td>
<td style="margin-right: 50px; vertical-align: middle; text-align: center; padding-top:5px; padding-bottom: 5px;">
<div class="col-sm-4 form-input">
<input type="text" name="totalhr" class="time form-control" id="totalhora" readonly>
</div>
</td>
<td style="margin-right: 50px; text-align: center; padding-top:5px; padding-bottom: 5px;">
<div class="col-sm-4 form-input">
<input type="text" name="iniciojornada" class="time form-control">
</div>
</td>
<td style="vertical-align: middle; text-align: center; padding-top:5px; padding-bottom: 5px;" class="EXCLUIR">
<a id="excluir" name="excluir" onclick="fnCustomDelete(this)">
<i class="fluigicon fluigicon-trash icon-sm"></i>
</a>
</td>
</tr>
</tbody>
Quando adiciono a hora inicial e final, ele executa uma função onde calcula a diferença e lança no campo name="totalhr"..Mas caso seja mais de uma linha o resultado aplicado é o mesmo para todos, exemplo: Na linha 1 se colocar 18:00 as 19:00 ele retorna corretamente 01:00 de total, mas se na segunda linha colocar 18:30 as 19:00 ele calcula corretamente os 00:30 de horas mas substitui em todos os campos de total de horas.
Segue as funções:
function fnCustomDelete(oElement){
i = i - 1;//decrementa o contador
fnWdkRemoveChild(oElement);
}
i = 0;
$(document).ready(function() {
$('.time').mask('#.##00:00', {reverse: true});
$('#botaoadicionar').click(function(){
// Manter os 3 underline, pois é gerado automatico do fluig
$('input[name^="fimhe___"]').change(function(){
alert("Inicio "+i)
var inicio = $('input[name^="iniciohe___"]');
var fim = $('input[name^="fimhe___"]');
getHoras(inicio, fim, i);
i++;
});
})
function getHoras(inicio, fim,i){
iniciohe = inicio[i].value;
fimhe = fim[i].value;
timeDiff(iniciohe,fimhe)
}
function timeDiff(first, second) {
if (first === '' || second === '') {
return false;
}
var f = first.split(' '),
s = second.split(' ');
if (first == '12:00 AM') {
f[0] = '0';
}
if (first == '12:00 PM') {
f[1] = 'AM';
}
if (second == '12:00 AM') {
s[0] = '24';
}
if (second == '12:00 PM') {
s[1] = 'AM';
}
var time1 = f[0].split(':'),
time2 = s[0].split(':');
time1 = time1[0] * 3600 + time1[1] * 60;
time2 = time2[0] * 3600 + time2[1] * 60;
var td = time2 - time1,
hours = parseInt((td / 3600), 10),
minutes = parseInt(((td - hours * 3600) / 60), 10),
diff = ((hours < 10 && hours >= 0) ? ('0' + hours) : hours) + ':' + ((minutes < 10 && minutes >= 0) ? ('0' + minutes) : minutes);
alert(diff);
$('input[name^="totalhr___"]').val(diff)
// $('#totalhr').val(diff)
}
Já tentei alterar essa linha: $('input[name^="totalhr_"]').val(diff) para que ele receba o ID ao invés do NAME, mas mesmo assim ele substitui sempre o último valor em todas as linhas da tabela, como posso colocar algum tipo de "contador" ou índice neste campo?