如何计算html表格中特定标题下面的数字乘法 - IONIC [英] How to calculate multiplication of numbers in a html table below specific headings - IONIC

问题描述

说明：我有一个包含3列的html表，价格，数量和总计。 Numers写在它们下面。

Explanation: I have a html table with 3 columns namely Price , Quantity and Total. Numers are written below them.

要求：我需要将价格乘以数量并将该值带入总计。我想在离开数量字段或按键时按[我正在输入]。

Requirement: I need to multiply price with Quantity and bring that value in Total. I want to do this while leaving the quantity field or on a key press [as i am typing].

图像和代码我的表格在下面分享

图片：

代码 invoice.html

<div style="margin-top:15px">
    <table>
       <tr>
         <th></th>
         <th>Price</th>
         <th>Quantity</th>
         <th>Total</th>

         <th></th>
       </tr>
       <tr *ngFor="let items of inVoiceItems2;let i=index;">
         <td>{{i+1}}</td> 
         <td style="width:198px"><input type="text" name="price" [(ngModel)]="inVoiceItems2[i].price" style="width:198px;border:0px"/></td>
         <td><input type="text" name="quantity" [(ngModel)]="inVoiceItems2[i].quantity" style="width:198px;border:0px"/></td>
         <td><input type="text" name="total" [(ngModel)]="inVoiceItems2[i].total" style="width:198px;border:0px"/></td>
       </tr>
   </table>  

   <br>
   <input type="button" value="Add New Row" (click)="addRow2()" style="margin-top:5px"/>
   <br>
   <input type="button" value="Calculate Bill" (click)="calculate_bill()" style="margin-top:5px"/>

 </div>

代码 invoice.ts

  addRow2(){
    this.inVoiceItems2.push({'debit':'','credit':''});
  }

  calculate_bill(){

  }

推荐答案

要在数量字段中键入时进行计算，您需要使用 blur 事件。

To do the calculation when typing in the quantity field, you will need to use the blur event.

<td><input type="text" name="quantity" [(ngModel)]="inVoiceItems2[i].quantity" style="width:198px;border:0px" (blur)="calculateRowTotal(i)"/></td>

该函数将是这样的：

calculateRowTotal(i: number) {
    this.inVoiceItems2[i].total = +this.inVoiceItems2[i].price* +this.inVoiceItems2[i].quantity
}

注意：如果插入的值无法转换为<，则会失败code>数字

NOTE: this will fail if the value being inserted cannot be converted to a number

这篇关于如何计算html表格中特定标题下面的数字乘法 - IONIC的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！