2017-06-19 43 views
0

jspに問題があります。数値を増やしたときに、入力型数値の値に動的に数値を乗算しようとしています。 私はコードに従ってきました。入力タイプ番号と数値の乗算

<td data-th="Price"> ${prod.unitPrice }</td> 
<td data-th="Quantity"><input type="number"class="form-control text-center" value="${item.quantity}"></td> 

上記のコードは、モデルで渡される値を出力します。 UIを使って値を増やしたときに新しい価値を得るための最良のロジックは何でしょうか。私はあなたが私がtrなどtdためclassを追加した提供td

ためtrを持っていると仮定すると、小計

<td data-th="Subtotal" class="text-center">$......</td> 
+0

あなたはjavascriptの – Zico

+0

を使用してそれを行うことができ、ページの読み込みにsub totalを設定私は試しましたが、結果がありません –

答えて

1

に表示する必要があります。入力quantityに依存して変化を計算しますSubtotal

<tr class="data"> 
     <td data-th="Price" class="price"> ${prod.unitPrice}</td> 
     <td data-th="Quantity"><input type="number" class="form-control text-center quantity" onkeyup="total(this);" value="${item.quantity}"></td> 
     <td data-th="Subtotal" class="total" class="text-center"> ... </td> 
</tr> 

次のスクリプトをもたらすように入力quantityを変更するための入力フィールドにonkeyupイベントを追加し、

//section for set sub total when page load 
var r, i; 
r = document.getElementsByClassName("data"); 
for(i=0;i<r.length; i++){ 
    r[i].getElementsByClassName("total")[0].innerHTML = 
     r[i].getElementsByClassName("price")[0].innerText * 
     r[i].getElementsByClassName("quantity")[0].value; 
} 


//function to update sub total when quantity changed 
function total(element) { 
    var tr = element.parentNode.parentNode; 
    var price = tr.getElementsByClassName("price")[0].innerText; 
    tr.getElementsByClassName("total")[0].innerHTML = price * element.value; 
} 

// function to sum all sub total 
function sumTotal(){ 
    var tot = 0 ; //variable hold the sum 
    var len = document.getElementsByClassName("total").length; 
    for(var i =0; i<len; i++){ 
    tot += parseInt(document.getElementsByClassName("total")[i].innerText); 
    } 
} 
+0

それは私のために完全に動作します 今私はすべての小計を追加して合計を計算しなければならないかと疑問に思っています –

+0

@SangamJungGauli私は答えに追加しました、これは合計 – Zico

+0

'の合計に余分な機能.....' はちょうど 'tot'価値を置きます'sumtot'へ。例えば'document.getElementById(" sumtot ")。innerHTML = tot' –

関連する問題