Question

以下是我动态生成的表格。表示通过查询结果循环生成行。但我在这里显示简单的html以避免混淆。

<table>
<thead>
<tr>
<th>Particulars</th>
<th>Packing</th>
<th>Quantity</th>
<th>Rate</th>
<th>Amount</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>1</td>
<td>
 <input type='text' class='quantity' style='width:80%;' readonly='' value='".$row->quantity."'/> 
</td>
<td><input type="text" name="rate"></td>
<td><input type='text' style='width:100%;' class='amount' readonly=''/></td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>
<input type='text' class='quantity' style='width:80%;' readonly='' value='".$row->quantity."'/>
</td>
<td><input type="text" name="rate"></td>
<td><input type='text' style='width:100%;' class='amount' readonly=''/></td>
 </tr>
<tr>
<td>1</td>
<td>1</td>
<td>
<input type='text' class='quantity' style='width:80%;' readonly='' value='".$row->quantity."'/>
</td>
<td><input type="text" name="rate"></td>
<td><input type='text' style='width:100%;' class='amount' readonly=''/> </td>
</tr>
</table>

在每一行中，费率和数量都会有所不同。所以我想要数量和速率的值，并将它们相乘并在各自的td输入框中显示数量。问题是用户要输入每行的费率，然后只有金额显示在数量输入框中。那我该怎么做？使用jquery或使用rate div的模糊事件或任何其他方式吗？

Answer 1

你需要检查速率输入字段的模糊。每次模糊时，使用适当的选择器获取数量值。使用其他功能尝试研究它可以更容易。你需要验证每个输入到检查它是一个有效的one.hope，帮助你交配.. :)

$('input[name=rate]').on('blur',function(){
       var rate=$(this).val();
       var quantity = $(this).parent().parent().find('.quantity').val();
       var amount = rate*quantity;
       $(this).parent().parent().find('.amount').val(amount);
    });

小提琴here

<强> FYI

而不是复制粘贴代码。尝试阅读更多正在使用的函数。

blur()

selectors

parent()

Answer 2

您可以像这样使用它来管理阻止文本框中的字符串输入

$('body').on('blur', '.rate',function(e){
    var row = $(this);
    e = (e) ? e : window.event;
    var charCode = (e.which) ? e.which : e.keyCode;
    if (charCode > 31 && charCode!=8 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    findSum(row)    
    return true;
});


function findSum(obj){
   var sum = 0;
   var rate = parseInt(obj.val());
   var qty = parseInt(obj.closest('tr').find('.quantity').val());
   sum = rate*qty; 
    if(!isNaN(sum)){
        obj.closest('tr').find('.amount').val(sum);
    }
    else{
         obj.closest('tr').find('.amount').val('0');
    }    
}

小提琴：

http://jsfiddle.net/hoja/qnaqa595/19/

计算每一行的费率变化金额

2 个答案:

您可以像这样使用它来管理阻止文本框中的字符串输入

小提琴：