Javascript 动态输入计算

Question

我有一个动态的表格，它计算持续时间。我可以通过单击添加新行来插入行。我的问题从第二行开始，因为它是动态的，所以无法计算。你能帮我一下吗？

谢谢

$(document).ready(function() {
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID
  var FieldCount = 1; //to keep track of text box added
  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      FieldCount++;
      wrapper.append('From &rarr; <input type="text" name="fromhours" id="fromhours' + FieldCount + '" onblur="cal()" /> : <input type="text" name="fromminutes" id="fromminutes' + FieldCount + '" onblur="cal()" /> | To &rarr; <input type="text" name="tohours" id="tohours' + FieldCount + '" onblur="cal()" /> : <input type="text" name="tominutes" id="tominutes' + FieldCount + '" onblur="cal()" /> | Result &rarr; <input type="text" name="resulthours" id="resulthours' + FieldCount + '" /> : <input type="text" name="resultminutes" id="resultminutes' + FieldCount + '" /><br /><br />'); //add input box
    }
  });

  wrapper.on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});

function cal() {
  var fromhours = parseInt(document.getElementById('fromhours').value) * 60;
  var fromminutes = parseInt(document.getElementById('fromminutes').value);
  var tohours = parseInt(document.getElementById('tohours').value) * 60;
  var tominutes = parseInt(document.getElementById('tominutes').value);
  var resultfrom = fromhours + fromminutes;
  var resultto = tohours + tominutes;
  var result = resultto - resultfrom;
  var hourresult = parseInt(result / 60);
  var minutesresult = (result - (hourresult * 60));
  document.getElementById('resulthours').value = '0' + hourresult.toFixed(0);
  document.getElementById('resultminutes').value = ('0' + minutesresult).slice(-2);

}

input[type=text] {
  width: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input style="margin-left:28px;" type="image" class="add_field_button" value="Add a new row" />
<br />From &rarr;
<input type="text" name="fromhours" id="fromhours" onblur="cal()" />:
<input type="text" name="fromminutes" id="fromminutes" onblur="cal()" />| To &rarr;
<input type="text" name="tohours" id="tohours" onblur="cal()" />:
<input type="text" name="tominutes" id="tominutes" onblur="cal()" />| Result &rarr;
<input type="text" name="resulthours" id="resulthours" />:
<input type="text" name="resultminutes" id="resultminutes" />
<br />
<br />
<div class="input_fields_wrap"></div>

我的问题来自第二行，我的结果无法正常工作

Answer 1

我不是JS专家，但是这与您引用相同ID属性下的行这一事实有关吗？据我所知，您没有指定要计算哪一行的代码。

有关可能的解决方案，请参阅@Bellash 的回答

Answer 2

需要按如下加x来引用当前元素行id

  wrapper.append('From &rarr; 
<input type="text" name="fromhours" id="fromhours' + FieldCount + '" onblur="cal(x)" /> ...


   function cal(x) {
      var fromhours = parseInt(document.getElementById('fromhours'+x).value) *   60;
   ...

$(document).ready(function() {
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID
  var FieldCount = 1; //to keep track of text box added
  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      FieldCount++;
      wrapper.append('From &rarr; <input type="text" name="fromhours" id="fromhours' + FieldCount + '" onblur="cal('+FieldCount +')" /> : <input type="text" name="fromminutes" id="fromminutes' + FieldCount + '" onblur="cal('+FieldCount +')" /> | To &rarr; <input type="text" name="tohours" id="tohours' + FieldCount + '" onblur="cal('+FieldCount +')" /> : <input type="text" name="tominutes" id="tominutes' + FieldCount + '" onblur="cal('+FieldCount +')" /> | Result &rarr; <input type="text" name="resulthours" id="resulthours' + FieldCount + '" /> : <input type="text" name="resultminutes" id="resultminutes' + FieldCount + '" /><br /><br />'); //add input box
    }
  });

  wrapper.on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});

function cal(x) {
 x=x||"";
  var fromhours = parseInt(document.getElementById('fromhours'+x).value) * 60;
  var fromminutes = parseInt(document.getElementById('fromminutes'+x).value);
  var tohours = parseInt(document.getElementById('tohours'+x).value) * 60;
  var tominutes = parseInt(document.getElementById('tominutes'+x).value);
  var resultfrom = fromhours + fromminutes;
  var resultto = tohours + tominutes;
  var result = resultto - resultfrom;
  var hourresult = parseInt(result / 60);
  var minutesresult = (result - (hourresult * 60));
  document.getElementById('resulthours'+x).value = '0' + hourresult.toFixed(0);
  document.getElementById('resultminutes'+x).value = ('0' + minutesresult).slice(-2);

}

input[type=text] {
  width: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input style="margin-left:28px;" type="image" class="add_field_button" value="Add a new row" />
<br />From &rarr;
<input type="text" name="fromhours" id="fromhours" onblur="cal()" />:
<input type="text" name="fromminutes" id="fromminutes" onblur="cal()" />| To &rarr;
<input type="text" name="tohours" id="tohours" onblur="cal()" />:
<input type="text" name="tominutes" id="tominutes" onblur="cal()" />| Result &rarr;
<input type="text" name="resulthours" id="resulthours" />:
<input type="text" name="resultminutes" id="resultminutes" />
<br />
<br />
<div class="input_fields_wrap"></div>

Answer 3

您忘记在 cal() 函数中传递 fieldCount 数字并将其与字段 ID 连接，因此 cal() 函数始终使用文本字段的第一行。我已经为您更正了您的代码段。

$(document).ready(function() {
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID
  var FieldCount = 1; //to keep track of text box added
  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      FieldCount++;
      wrapper.append('From &rarr; <input type="text" name="fromhours" id="fromhours' + FieldCount + '" onblur="cal(' + FieldCount + ')" /> : <input type="text" name="fromminutes" id="fromminutes' + FieldCount + '" onblur="cal(' + FieldCount + ')" /> | To &rarr; <input type="text" name="tohours" id="tohours' + FieldCount + '" onblur="cal(' + FieldCount + ')" /> : <input type="text" name="tominutes" id="tominutes' + FieldCount + '" onblur="cal(' + FieldCount + ')" /> | Result &rarr; <input type="text" name="resulthours" id="resulthours' + FieldCount + '" /> : <input type="text" name="resultminutes" id="resultminutes' + FieldCount + '" /><br /><br />'); //add input box
    }
  });
  wrapper.on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});

function cal(fieldCount) {
  console.log(arguments);
  var fromhours = parseInt(document.getElementById('fromhours' + fieldCount).value) * 60;
  var fromminutes = parseInt(document.getElementById('fromminutes' + fieldCount).value);
  var tohours = parseInt(document.getElementById('tohours' + fieldCount).value) * 60;
  var tominutes = parseInt(document.getElementById('tominutes' + fieldCount).value);
  var resultfrom = fromhours + fromminutes;
  var resultto = tohours + tominutes;
  var result = resultto - resultfrom;
  var hourresult = parseInt(result / 60);
  var minutesresult = (result - (hourresult * 60));
  document.getElementById('resulthours' + fieldCount).value = '0' + hourresult.toFixed(0);
  document.getElementById('resultminutes' + fieldCount).value = ('0' + minutesresult).slice(-2);

}

input[type=text] {
  width: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input style="margin-left:28px;" type="image" class="add_field_button" value="Add a new row" />
<br />From &rarr;
<input type="text" name="fromhours" id="fromhours1" onblur="cal(1)" />:
<input type="text" name="fromminutes" id="fromminutes1" onblur="cal(1)" />| To &rarr;
<input type="text" name="tohours" id="tohours1" onblur="cal(1)" />:
<input type="text" name="tominutes" id="tominutes1" onblur="cal(1)" />| Result &rarr;
<input type="text" name="resulthours" id="resulthours1" />:
<input type="text" name="resultminutes" id="resultminutes1" />
<br />
<br />
<div class="input_fields_wrap"></div>

Answer 4

您必须获取唯一 ID 并在计算中使用它。在 JS 中，我用 on keyup 替换了该函数，并添加了一条语句来防止 NaN

JS

$(document).ready(function() {
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID
  var FieldCount = 1; //to keep track of text box added
  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      FieldCount++;
      wrapper.append('From &rarr; <input type="text" class="cal" name="fromhours" id="fromhours' + FieldCount + '" /> : <input type="text" class="cal" name="fromminutes" id="fromminutes' + FieldCount + '" /> | To &rarr; <input type="text" class="cal" name="tohours" id="tohours' + FieldCount + '" /> : <input type="text" class="cal" name="tominutes" id="tominutes' + FieldCount + '" /> | Result &rarr; <input type="text" class="cal" name="resulthours" id="resulthours' + FieldCount + '" /> : <input type="text" class="cal" name="resultminutes" id="resultminutes' + FieldCount + '" /><br /><br />'); //add input box
    }
  });

  wrapper.on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});

$('body').on('keyup', '.cal', function () {
    var id = $(this).attr('id').substr(-1),
        fromhours = ~~$('#fromhours' + id).val(),
        fromminutes = ~~$('#fromminutes' + id).val(),
        tohours = ~~$('#tohours' + id).val(),
        tominutes = ~~$('#tominutes' + id).val();

    if (fromhours != '' && fromminutes != '' && tohours != '' && tominutes != '') {
        var resultfrom = (fromhours * 60) + fromminutes,
            resultto = (tohours * 60) + tominutes,
            result = resultto - resultfrom,
            hourresult = ~~(result/60),
            minuteresult = ~~(result - hourresult * 60);
        $('#resulthours' + id).val(hourresult);
        $('#resultminutes' + id).val(minuteresult);
    }
});

HMTL

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input style="margin-left:28px;" type="image" class="add_field_button" value="Add a new row" />
<br />From &rarr;
<input type="text" class="cal" name="fromhours" id="fromhours1" />:
<input type="text" class="cal" name="fromminutes" id="fromminutes1" /> | To &rarr;
<input type="text" class="cal" name="tohours" id="tohours1" />:
<input type="text" class="cal" name="tominutes" id="tominutes1" /> | Result &rarr;
<input type="text" class="cal" name="resulthours" id="resulthours1" />:
<input type="text" class="cal" name="resultminutes" id="resultminutes1" />
<br />
<br />
<div class="input_fields_wrap"></div>

Javascript 动态输入计算

Javascript dynamic inputs calculation

javascript

jquery

dynamic