javascript - 如何添加一些动态字段并使用它们来获得一些数学结果？

Question

我正在使用 spring MVC，并且我有一个带有动态字段的表单。

我可以在表单中创建多行，每行有 4 个输入，如下所示。

当我在第二个和第三个输入字段中插入一个数字时，我想将它们相乘并将结果写入第四个字段。

我该怎么做？也许使用 jQuery？

这是我的代码:

var riga = 0;

function aggiungiRiga() {

  riga++;
  var objTo = document.getElementById('rigaOfferta')
  var divtest = document.createElement("div");
  divtest.setAttribute("class", "removeclass" + riga);
  var rdiv = 'removeclass' + riga;
  divtest.innerHTML = '<div class="col-xs-5 col-sm-5 col-md-5"><div class="form-group"> <input type="text" class="form-control" id="descrizione_"' + riga + '" name="descrizione[]" value="" placeholder="Descrizione"></div></div><div class="col-xs-2 col-sm-2 col-md-2 col-md-offset-1"><div class="form-group"><input type="number" min="0" step="0.01" class="form-control" id="prezzo_"' + riga + '" name="prezzo[]" value="" placeholder="Prezzo €"/></div></div><div class="col-xs-2 col-sm-2 col-md-2 "><div class="form-group"><input type="number" min="0" step="0.5" class="form-control" id="ore_"' + riga + '" name="ore[]" value="" placeholder="Numero Ore"/></div></div><div class="col-xs-2 col-sm-2 col-md-2 "><div class="form-group"><div class="input-group"> <input type="text" class="form-control" id="totale_"' + riga + '" name="Totale[]" value="" placeholder="0" readonly="readonly"/><div class="input-group-btn"> <button class="btn btn-danger" type="button" onclick="rimuoviRiga(' + riga + ');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div>';

  objTo.appendChild(divtest)
}

function rimuoviRiga(rid) {
  $('.removeclass' + rid).remove();
}

<div id="rigaOfferta">
  <jsp:text/>
</div>

<div class="col-xs-5 col-sm-5 col-md-5">
  <div class="form-group">
    <input type="text" class="form-control" id="descrizione_0" name="descrizione[]" value="" placeholder="Descrizione" required="required" />
  </div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-md-offset-1">
  <div class="form-group">
    <input type="number" min="0" step="0.01" class="form-control" id="prezzo_0" name="prezzo[]" value="" placeholder="Prezzo €" required="required" />
  </div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 ">
  <div class="form-group">
    <input type="number" min="0" step="0.5" class="form-control" id="ore_0" name="ore[]" value="" placeholder="Numero Ore" required="required" />
  </div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 ">
  <div class="form-group">
    <div class="input-group">
      <input type="text" class="form-control" id="totale_0" name="Totale[]" value="0" placeholder="0" readonly="readonly" />
      <div class="input-group-btn">
        <button class="btn btn-success" type="button" onclick="aggiungiRiga();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
      </div>
    </div>
  </div>
</div>

Answer 1

由于您将有多个输入字段，我建议您向它们添加一个类，例如 input-listener ，然后是一个数据属性，例如 data-row="n" 其中 n 代表行号。然后使用 jQuery 添加事件监听器(因为它更容易)，如下所示:

$('.input-listener').on('change', function(){
    var row = $(this).data('row'); //this way you know which row you are working with
    //now that you have the row you can get all the inputs you want
    var prezzo = $('#prezzo_' + row).val() || 0;
    var ore = $('#ore_' + row).val() || 0;
    $('#totale_' + row).val(prezzo * ore);
});

由于我没有测试代码，所以我不确定它是否 100% 有效，但它可以是一个起点。如果您发现代码中有任何错误，请告诉我，我会尝试纠正它们。

唯一的事情是，如果添加新行，则必须重新绑定(bind)此事件处理程序，因此您必须找到解决方法。也许将其添加到您的 aggiungiRiga() 函数中。

编辑:我删除了 e 并将其更改为 this，然后像之前一样将 # 添加到 jQuery 选择器的 ID忘了。