總和分鐘，並在通用輸入的Jquery秒

Question

讓我解釋什麼，我嘗試做一個表單，用戶可以把輸入和數據的時間（MM：SS）在一個特定的輸入，例如：

<table border="0" cellpadding="0" cellspacing="0" id='tiempos_te'> 
     <tr> 
      <td title="Debe ser 8 d&iacute;gitos num&eacute;ricos m&aacute;ximo"><p align="center">Nro. Factura</p></td> 
      <td title="Debe colocar el tiempo en formato MINSEC (el campo colocara automaticamente los &quot;:&quot;)"><p align="center">Montar t&eacute;</p></td> 
      <td title="Debe colocar el tiempo en formato MINSEC (el campo colocara automaticamente los &quot;:&quot;)"><p align="center">Armado del vaso</p></td> 
      <td title="Debe colocar el tiempo en formato MINSEC (el campo colocara automaticamente los &quot;:&quot;)"><p align="center">Armado del t&eacute;</p></td> 
      <td><p align="center">Tiempo total</p></td> 
      <td><p align="center">Turno</p></td> 
     </tr> 
      <tr> 
      <td><input name="fac1" type="text" id="fac1" onKeyPress="return acceptNum(event)" maxlength="10" class="obligatorio" /></td> 
      <td> <input type="text" name="tiempo11" id="tiempo11" class="obligatorio tiempo" maxlength="6" onKeyPress="return acceptNum(event)" /></td> 
      <td> <input type="text" name="tiempo12" id="tiempo12" class="obligatorio tiempo" maxlength="6" onKeyPress="return acceptNum(event)" /></td> 
      <td> <input type="text" name="tiempo13" id="tiempo13" class="obligatorio tiempo" maxlength="6" onKeyPress="return acceptNum(event)" /></td> 
      <td><input type="text" name="totalt1" id="totalt1" readonly="readonly" class="total_tiempo" /></td> 
      <td><select name="turn1" id="turn1" class="obligatorio"> 
      <option value="2">Vespertino</option> 
      <option value="3">Nocturno</option> 
      </select></td> 
      </tr> 
    </table> 

有3個輸入，人們必須輸入時間（mm：ss），並在名爲「totalt1」的輸入中，我需要查看所有輸入的總和（時間）。

我提出（與anothers的幫助）的功能，使之和，但他不隨時間格式工作：

$('#tiempos_te').delegate('input[name^="tiempo"]', 'blur', function() { 
     var number= this.name.replace('tiempo',''), // extract the number from tiempoxxx 
     counter = number.substr(0, number.length -1); // keep everything from the number except the last digit 

     $('input[name^="totalt' + counter + '"]').val($('input[name^="tiempo' + counter + '"]').sumValues()); 
    }); 

---

代碼添加或刪除輸入：

var counter = 1; 
$("#addButton").click(function() { 
    //alert (counter); 
    if(counter>=6){ 
     alert("Solo se permiten 6 Mediciones por dia"); 
     return false;} 
     else{ 
      counter++; 
      $('#tiempos_te').append('<tr id="terow' + counter + '">' + 
     '<td><input name="fac' + counter + '" type="text" id="fac' + counter + '" onKeyPress="return acceptNum(event)" maxlength="10" class="obligatorio"/></td>' + 
     '<td> <input type="text" name="tiempo' + counter + '1" id="tiempo' + counter + '1" class="obligatorio tiempo" maxlength="6" onKeyPress="return acceptNum(event)" /></td>' + 
     '<td> <input type="text" name="tiempo' + counter + '2" id="tiempo' + counter + '2" class="obligatorio tiempo" maxlength="6" onKeyPress="return acceptNum(event)" /></td>' + 
     '<td> <input type="text" name="tiempo' + counter + '3" id="tiempo' + counter + '3" class="obligatorio tiempo" maxlength="6" onKeyPress="return acceptNum(event)" /></td>' + 
     '<td><input type="text" name="totalt' + counter + '" id="totalt' + counter + '" readonly="readonly" class="total_tiempo" /></td>' + 
     '<td><select name="turn' + counter + '" id="turn' + counter + '" class="obligatorio">' + 
     '<option value="2">Vespertino</option>' + 
     '<option value="3">Nocturno</option>' + 
     '</select></td>' + 
     '</tr>');} 
}); 
$("#delButton").click(function() { 
    if(counter<=1){ 
     alert("Debe existir mínimo 1 Registro"); 
     return false;} 
     else{ 
$('#terow' + counter).remove();  
counter--;} 
}); 

示例代碼：http://jsfiddle.net/JuJoGuAl/tNjf3/

Answer 1

我解決了它！代碼：

的Jquery：

$.fn.sumValues = function() { 
    var sum = 0; 
    this.each(function() { 
     if ($(this).is(':input')) { 
      var val = $(this).val(); 
     } else { 
      var val = $(this).text(); 
     } 
     sum += parseFloat(('0' + val).replace(/[^0-9-\.]/g, ''), 10); 
    }); 
    return sum; 
}; 
function toSeconds(time) { 
    var parts = time.split(':'); 
    return (+parts[0]) * 60 + (+parts[1]); 
} 
function toHHMMSS(sec) { 
    var sec_num = parseInt(sec, 10); // don't forget the second parm 
    var hours = Math.floor(sec_num/3600); 
    var minutes = Math.floor((sec_num - (hours * 3600))/60); 
    var seconds = sec_num - (hours * 3600) - (minutes * 60); 

    if (hours < 10) {hours = "0"+hours;} 
    if (minutes < 10) {minutes = "0"+minutes;} 
    if (seconds < 10) {seconds = "0"+seconds;} 
    var time = hours+':'+minutes+':'+seconds; 
    return time; 
} 
$(document).ready(function() { 

    var counter = 1; 
    $("#addButton").click(function() { 
     //alert (counter); 
     if(counter>=6){ 
      alert("Solo se permiten 6 Mediciones por dia"); 
      return false;} 
      else{ 
       counter++; 
       $('#tiempos_te').append('<tr id="terow' + counter + '">' + 
      '<td><input name="fac' + counter + '" type="text" id="fac' + counter + '" onKeyPress="return acceptNum(event)" maxlength="10" class="obligatorio"/></td>' + 
      '<td> <input type="text" name="tiempo' + counter + '1" id="tiempo' + counter + '1" class="obligatorio tiempo" maxlength="6" onKeyPress="return acceptNum(event)" /></td>' + 
      '<td> <input type="text" name="tiempo' + counter + '2" id="tiempo' + counter + '2" class="obligatorio tiempo" maxlength="6" onKeyPress="return acceptNum(event)" /></td>' + 
      '<td> <input type="text" name="tiempo' + counter + '3" id="tiempo' + counter + '3" class="obligatorio tiempo" maxlength="6" onKeyPress="return acceptNum(event)" /></td>' + 
      '<td><input type="text" name="totalt' + counter + '" id="totalt' + counter + '" readonly="readonly" class="total_tiempo" /></td>' + 
      '<td><select name="turn' + counter + '" id="turn' + counter + '" class="obligatorio">' + 
      '<option value="2">Vespertino</option>' + 
      '<option value="3">Nocturno</option>' + 
      '</select></td>' + 
      '</tr>');} 
    }); 
    $("#delButton").click(function() { 
     if(counter<=1){ 
      alert("Debe existir mínimo 1 Registro"); 
      return false;} 
      else{ 
    $('#terow' + counter).remove();  
    counter--;} 
    }); 
    $('#tiempos_te').delegate('input[name^="tiempo"]', 'blur', function() { 
     var number= this.name.replace('tiempo',''), // extract the number from tiempoxxx 
     counter = number.substr(0, number.length -1); // keep everything from the number except the last digit 

     //$('input[name^="totalt' + counter + '"]').val($('input[name^="tiempo' + counter + '"]').sumValues()); 
     $('input[name^="totalt' + counter + '"]').val(toHHMMSS($('input[name^="tiempo' + counter + '"]').sumValues())); 
    }); 
    $("form").submit(function(){ 
     var fecha = $('#fec'), fact = $('#fac'), valido = false; 
     val_cmp(fecha); val_cmp(fact); 
     valido = valido && val_cmp(fecha); 
     valido = valido && val_cmp(fact); 
     if(valido){ 
      return true; 
     }else{ 
      return false; 
     } 
    }); 
}); 

HTML：

<div class="tiempote"> 
    <p> 
    <span class="titulo_te">{new}</span> 
    <span class="pop_te">{msj}.</span> 
    </p> 
    <form id="form1" name="form1" method="post" enctype="multipart/form-data"> 
    <label>Fecha de la medici&oacute;n</label> 
    <input name="fec" type="text" id="fec" class="obligatorio" readonly="readonly" /> 
    <span class="avisopop" id="obg_fec"></span> 
    <br /> 
    <table border="0" cellpadding="0" cellspacing="0" id='tiempos_te'> 
     <tr> 
      <td title="Debe ser 8 d&iacute;gitos num&eacute;ricos m&aacute;ximo"><p align="center">Nro. Factura</p></td> 
      <td title="Debe colocar el tiempo en formato MINSEC (el campo colocara automaticamente los &quot;:&quot;)"><p align="center">Montar t&eacute;</p></td> 
      <td title="Debe colocar el tiempo en formato MINSEC (el campo colocara automaticamente los &quot;:&quot;)"><p align="center">Armado del vaso</p></td> 
      <td title="Debe colocar el tiempo en formato MINSEC (el campo colocara automaticamente los &quot;:&quot;)"><p align="center">Armado del t&eacute;</p></td> 
      <td><p align="center">Tiempo total</p></td> 
      <td><p align="center">Turno</p></td> 
     </tr> 
      <tr> 
      <td><input name="fac1" type="text" id="fac1" onKeyPress="return acceptNum(event)" maxlength="10" class="obligatorio" /></td> 
      <td> <input type="text" name="tiempo11" id="tiempo11" class="obligatorio tiempo" maxlength="6" onKeyPress="return acceptNum(event)" /></td> 
      <td> <input type="text" name="tiempo12" id="tiempo12" class="obligatorio tiempo" maxlength="6" onKeyPress="return acceptNum(event)" /></td> 
      <td> <input type="text" name="tiempo13" id="tiempo13" class="obligatorio tiempo" maxlength="6" onKeyPress="return acceptNum(event)" /></td> 
      <td><input type="text" name="totalt1" id="totalt1" readonly="readonly" class="total_tiempo" /></td> 
      <td><select name="turn1" id="turn1" class="obligatorio"> 
      <option value="2">Vespertino</option> 
      <option value="3">Nocturno</option> 
      </select></td> 
      </tr> 
    </table> 
    <h5 align="right"><a id="addButton" >Agregar</a>/<a id="delButton" >Quitar</a></h5> 
    <input type="hidden" name="action" value="{action}" /> 
    <input type="hidden" name="id" value="{id}" /> 
    <span class="titulo_te" style="text-align: center;"><input type="submit" name="button" id="button" value="Guardar" /></span> 
    <!--<label>Factura</label> 
    <span class="subtitulo">Ingrese el n&uacute;mero de Factura</span> </label> 
    <input name="fac" type="text" id="fac" onKeyPress="return acceptNum(event)" maxlength="10" class="obligatorio" /> 
    <span class="avisopop" id="obg_fac"></span> 
    <div id='tiempos_te'> 
     <div id="tiempo1"> 
     <label>Montar T&eacute; 
     <span class="subtitulo">Tiempo para montar el T&eacute;</span> </label> 
     <input type="text" name="tiempo11" id="tiempo11" class="obligatorio tiempo" maxlength="6" onKeyPress="return acceptNum(event)" /> 
     <span class="avisopop" id="obg_tiempo11"></span> 

     <label>Armado del Vaso 
     <span class="subtitulo">Tiempo del armado del vaso</span> </label> 
     <input type="text" name="tiempo12" id="tiempo21" class="obligatorio tiempo" maxlength="6" onKeyPress="return acceptNum(event)" /> 
     <span class="avisopop" id="obg_tiempo21"></span> 

     <label>Armado del T&eacute; 
     <span class="subtitulo">Tiempo para el armado del t&eacute;</span> </label> 
     <input type="text" name="tiempo13" id="tiempo31" class="obligatorio tiempo" maxlength="6" onKeyPress="return acceptNum(event)" /> 
     <span class="avisopop" id="obg_tiempo31"></span> 


     <label>Tiempo Total 
     <span class="subtitulo">Tiempo total de la Medici&oacute;n tomada</span></label> 
     <input type="text" name="totalt1" id="totalt1" readonly="readonly" class="total_tiempo" /> 
     <label>Turno 
     <span class="subtitulo">Turno de la Medici&oacute;n</span></label> 
     <select name="turn1" id="turn1" class="obligatorio"> 
      <option value="2">Vespertino</option> 
      <option value="3">Nocturno</option> 
     </select> 
     </div> 
    </div> 
    <input type="hidden" name="action" value="{action}" /> 
    <input type="hidden" name="id" value="{id}" /> 
    <span class="titulo" style="text-align: center;"><input type="submit" name="button" id="button" value="Guardar" /></span>--> 
    </form> 
</div> 

的完整代碼的工作：http://jsfiddle.net/JuJoGuAl/tNjf3/