我有一个使用MVC和Razor的.Net项目。 我将包含产品的列表传递到视图,其中我具有ProdutoValor(产品值),以及每个iten的QuantidaVenda(售出的数量)的TextboxFor。我想为每个项目获取值“ QuantidadeVenda * ProdutoValor”,并在文本框中显示总值。如何使用javascript做到这一点?
我想在用户输入数量后立即计算总数
这是我的观点:
@for (int i = 0; i < Model.Produtos.Count; i++)
{
<tr>
<td>
@Html.HiddenFor(model => model.Produtos[i].ProdutoId)
@Html.HiddenFor(model => model.Produtos[i].ProdutoDescricao)
@Html.DisplayFor(model => model.Produtos[i].ProdutoNome)@Html.HiddenFor(model => model.Produtos[i].ProdutoNome)
</td>
<td>
@Html.DisplayFor(p => p.Produtos[i].ProdutoValor, new { @class = "form-control", Value = Model.Produtos[i].ProdutoValor }) @Html.HiddenFor(model => model.Produtos[i].ProdutoValor)
</td>
<td>
@Html.DisplayFor(p => p.Produtos[i].ProdutoEstoque, new { @class = "form-control", Value = Model.Produtos[i].ProdutoEstoque })@Html.HiddenFor(model => model.Produtos[i].ProdutoEstoque)
</td>
<td>
@if (Model.Produtos[i].ProdutoEstoque < 1)
{
@Html.TextBoxFor(p => p.Produtos[i].QuantidadeVenda, new { value = 0, disabled = "disabled" })
}
else
{
@Html.TextBoxFor(p => p.Produtos[i].QuantidadeVenda, new { value = 0, @id = "quantidade" })
if (Model.Produtos[i].ProdutoEstoque < Model.Produtos[i].QuantidadeVenda)
{<p>valor invalido</p>}
}
</td>
</tr>
}
[enter image description here][1]
答案 0 :(得分:0)
有关的Javascript:
Onchange Event for QuantidadeVenda(quantity):
function onchange()
{
var total= document.getElementById("name of total textbox").Value*
document.getElementById("name of quantity textbox").value
document.getElementById("name of total textbox").innerHTML=total
}
jQuery:
on change or LostFocus Event
$("input").change(function(){
var total= $("#name of total textbox").val()*
$("#name of quantity textbox").val()
$("#name of total textbox").val=total
});
更新代码
HTML:
<table border="1">
<tr>
<td>product</td>
<td>quantity</td>
<td>total</td>
</tr>
<tr>
<td>
10
</td>
<td>
<input type="text" name="txt" value="" onchange="myFunction(this)">
</td>
<td><label>_</label></td>
</tr>
<tr>
<td>
10
</td>
<td>
<input type="text" name="txt" value="" onchange="myFunction(this)">
</td>
<td><label>_</label></td>
</tr>
</table>
Javascript:
function myFunction($this) {
debugger $($this).parent().siblings(":last").find('label').text($($this).parent().siblings().first().text().trim() * $this.value)
}