我有一个动态创建的表,其id为“editTable”,如下所示:
<tbody>
@{var i = 0;}
@foreach (var item in Model)
{
<tr>
<td width="25%">
@Html.DisplayFor(modelItem => item.Product.Name)
</td>
<td width="25%">
@Html.DisplayFor(modelItem => item.Quantity)
</td>
<td width="25%">
<div class="editor-field">
@Html.EditorFor(modelItem => item.UnitPrice)
@Html.ValidationMessageFor(model => item.UnitPrice)
</div>
</td>
<td width="25%" id="total"></td>
</td>
</tr>
}
</tbody>
第3个td元素由一个C#文本框组成,该文本框在html中变成了一个元素。
现在我想将数量乘以单价以在其旁边的第4个td元素中显示该值。每次调整文本框中的值时,此值都应更新。我是JQuery / JavaScript的新手,并提出了以下代码:
// Calculating quantity*unitprice
$('#editTable tr td:nth-child(3) input').each( function (event) {
var $quant = $('#editTable tr td:nth-child(2)', this).val();
var $unitPrice = $('#editTable tr td:nth-child(3) input', this).val();
$('#editTable tr td:nth-child(4)').text($quant * $unitPrice);
});
这不起作用,只在第4个元素中显示NaN。任何人都可以帮助我将此代码更新为工作版本吗?非常感谢任何帮助。
答案 0 :(得分:1)
我恳求你不小心切换了单位和价格,因为它有更多的逻辑来改变单位数量然后改变价格。我拿了你的html和javascript并尝试尽可能少地改变它以使它工作(我不是说解决方案是完美的,我只是不想给你一个完全不同的例子,如何做到这一点)。 / p>
html(C#与此问题无关):
<table id="editTable">
<tbody>
<tr>
<td width="25%">
Product name
</td>
<td width="25%">
5
</td>
<td width="25%">
<div class="editor-field">
<input id="UnitPrice" name="UnitPrice" type="number" value="2" style="width:40px" />
</div>
</td>
<td width="25%" id="total"></td>
</tr>
</tbody>
</table>
javascript / jquery(应该在加载时运行):
$('#editTable tr td:nth-child(3) input').each(updateTotal);
$('#editTable tr td:nth-child(3) input').change(updateTotal);
var element;
function updateTotal(element)
{
var quantity = $(this).closest('tr').find('td:nth-child(2)').text();
var price = $(this).closest('tr').find('td:nth-child(3) input').val();
$(this).closest('tr').find('td:nth-child(4)').text(quantity * price);
}
你遇到的问题是jquery。我已经创建了一个接收一个元素的函数(在我们的例子中它是你的UnitPrice输入),然后它抓取了类型tr
的最近的祖先(它所在的行)并从那里它做了你试过的做。
您已使用jquery选择器获取所有表行中的所有第二个单元格,closest('tr').find
将其限制为当前行。
您尝试在td元素上使用.val()
,您应该使用.text()
或.html()
。相反,您也可以在td上添加data-val="<%=value%>"
,然后使用.data('val')
。
最好直接从$(element).val()获取单位,然后不进入tr,然后返回到td和输入。
要查看它是否有效:http://jsfiddle.net/Ynsgf/1/
我希望我没有让你对我的解释和我给你的选择感到困惑。
答案 1 :(得分:1)
这是编写jquery部分的另一种方法。
$('#editTable tr').each(function (i, row) {
var $quant = $(row).find('.editor-field input').val();
var $unitPrice = $(row).find('.editor-field input').val();
$(row).find('td:nth-child(4)').text($quant * $unitPrice);
});