将输入类型数字的值与数字相乘

Question

我遇到了 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>

Answer 1

假设您有 tr 提供 td

我为 tr 和 td 添加了 class。将 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); 
  }
}

将输入类型数字的值与数字相乘

Multiply value of input type number and a number

java

spring

jsp

jsp-tags