使用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);
        });