通用输入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”，我需要查看所有输入的总和（及时）。

我（在其他人的帮助下）制作了一个总和的功能，但他不使用时间格式：

$('#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/