jquery / javascript根据其他输入

时间:2015-08-20 23:01:44

标签: javascript jquery

我正在尝试根据用户在输入字段中输入的内容进行一些数学运算。这些变化应反映在另一个领域。问题是,用户可以拥有多个表行,并且计算必须分别用于每一行。如果我对行(数字)进行硬编码,一切正常。这是故事: 用户输入数量 - >输入价格 - >并且即时计算总数。

这是添加另一行的代码:         

    var product_row = <?php echo $product_row; ?>;

function addProducts() {
html  = '<tr id="invoice-product-row' + product_row + '">';

html += '  <td class="text-left" style="width:90px"><input type="text" class="iquantity' + product_row + '" name="invoice_product[' + product_row + '][quantity]" value="" placeholder="<?php echo $entry_quantity; ?>" class="form-control" /></td>';
html += '  <td class="text-left"><input type="text" name="invoice_product[' + product_row + '][product_desc]" value="" placeholder="<?php echo $entry_product_desc; ?>" class="form-control" /></td>';    
html += '  <td class="text-left"><select class="itax' + product_row + '" name="invoice_product[' + product_row + '][tax]" class="form-control">';
<?php foreach ($tax_rates as $tax_rate){ 
$percent_rate = round($tax_rate['tr_rate'],4); ?>
html += '    <option value="<?php echo $tax_rate['tr_rate']; ?>"><?php echo $percent_rate. "%"; ?></option>';
<?php } ?>
html += '  </select></td>';

html += '  <td class="text-left" style="width:140px"><input type="text" class="iprice' + product_row + '" name="invoice_product[' + product_row + '][price]" value="" placeholder="<?php echo $entry_price; ?>" class="form-control" /></td>';
html += '  <td class="text-left" style="width:140px"><input type="text" class="itotal' + product_row + '" name="invoice_product[' + product_row + '][total]" value="" placeholder="<?php echo $entry_total_ex; ?>" class="form-control" /></td>';
html += '  <td></td>';
html += '  <td class="text-left"><button type="button" onclick="$(\'#invoice-product-row' + product_row + '\').remove();" data-toggle="tooltip" title="<?php echo $button_remove; ?>" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
html += '  <td class="text-right"></td>';
html += '</tr>';

$('#products tbody').append(html);

$('.iprice2').bind('change keydown keyup',function (){
$('input.itotal2').val((($(this).val()* $('input.iquantity2').val())* 1.21).toFixed(2));
});

product_row++;

}
//--></script>

这部分代码现在已经过硬编码(仅适用于第2行):

$('.iprice2').bind('change keydown keyup',function (){
$('input.itotal2').val((($(this).val()* $('input.iquantity2').val())*     1.21).toFixed(2));
});

但我希望它是动态的(每一行)。我也试过了,但后来没有任何反应:

$('.iprice'' + product_row + ').bind('change keydown keyup',function (){
$('input.itotal'' + product_row + ').val((($(this).val()* $('input.iquantity'' + product_row + ').val())* 1.21).toFixed(2));
});

我感觉它的语法相关。有人可以对此有所了解吗?

提前致谢

1 个答案:

答案 0 :(得分:0)

存在语法错误。您需要将变量名称保留在字符串之外。

编辑:还存在变量范围问题。 product_row未在事件处理程序中定义。如果你的product_row变量以1开头,那么你可以使用index()方法获得product_row的值。

JS:

$('.iprice' + product_row).bind('change keydown keyup',function (){
    var elemIndex = $("input[class^='iprice']").index($(this))+1;
    $('input.itotal' + elemIndex).val((($(this).val()* $('input.iquantity' + elemIndex).val())* 1.21).toFixed(2));
});