使用JQuery将文本框与动态创建的表中的单元格相乘

Question

我有一个动态创建的表，其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。 任何人都可以帮助我将此代码更新为工作版本吗？ 任何帮助将非常感谢。

Answer 1

我想你不小心切换了单位和价格，因为它有更多的逻辑来改变单位数量然后价格。 我拿了你的html和javascript并试图尽可能少地改变它使它工作（我不是说解决方案是完美的，我只是不想给你一个完全不同的例子，如何做到这一点）。

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/

我希望我没有让你对我的解释和我给你的选择感到困惑。

Answer 2

这是编写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);
        });