c# - 使用 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> 

第三个 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);
});

这不起作用，仅在第四个元素中显示 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将其限制为当前行。 您尝试过使用.val()在 td 元素上，您应该使用 .text()或.html() 。相反，您还可以添加 data-val="<%=value%>"在 td 上，然后使用 .data('val') 。 最好直接从 $(element).val() 获取单位，而不是转到 tr，然后返回到 td 和输入。

要查看它的工作情况:http://jsfiddle.net/Ynsgf/1/

我希望我的解释和给您的选项没有给您带来任何困惑。