Question

我有一个现有的html表单，它使用数组来存储多个行值。所以我没有针对不同行的相同字段的特定名称。在PHP页面中，我根据索引匹配行。在下面的表格中，如何使按钮+和 - 增加和减少特定行数量的值？

ROW 1

<input type="text" name="product[]" />
<input type="text" name="price[]" value="" onChange="updatePrice()" />
<input type="text" name="quantity[]" value="" onChange="updatePrice()" />
<input type="button"  onclick="inc(this)" value="+"/>
<input type="button"  onclick="dec(this)" value="-"/>`

第2行

<input type="text" name="product[]" />
<input type="text" name="price[]" value="" onChange="updatePrice()" />
<input type="text" name="quantity[]" value="" onChange="updatePrice()" />
<input type="button"  onclick="inc(this)" value="+"/>
<input type="button"  onclick="dec(this)" value="-"/>

ROW 3

<input type="text" name="product[]" />
<input type="text" name="price[]" value="" onChange="updatePrice()" />
<input type="text" name="quantity[]" value="" onChange="updatePrice()" />
<input type="button"  onclick="inc(this)" value="+"/>
<input type="button"  onclick="dec(this)" value="-"/>

Answer 1

在我看来，你首先应该计算项目：

<input type="text" name="product[]" />
<input id="price-1" type="text" name="price[]" value="" onChange="updatePrice(1)" /> <!-- row number -->
<input id="qty-1" type="text" name="quantity[]" value="" onChange="updatePrice(1)" />
<input type="button"  onclick="inc('qty-1')" value="+"/>
<input type="button"  onclick="dec('qty-1')" value="-"/>

然后使用javascript来操作项目：

<script>
function inc(id) {
  stepQty(id, +1);
}
function dec(id) {
  stepQty(id, -1);
}
function stepQty(id, step) {
  var value = $('#'+id).val();
  $('#'+id).val(value + step);
}
function updatePrice(id) {
  var a = $('#price-'+id).val() || 0;
  var b = $('#qty-'+id).val() || 0;
  $('#'+id).val(a*b);
}
</script>

数字增量按钮

1 个答案: