我遇到了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增加值时,获得新值的最佳逻辑是什么。我需要在小计上显示
<td data-th="Subtotal" class="text-center">$......</td>
答案 0 :(得分:1)
假设您提供了tr
td
我为class
以及tr
添加了td
。已将onkeyup
事件添加到输入字段,以便将输入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
计算更改,并在页面加载时设置sub total
//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);
}
}