CODEWITHSUNDEEP
c#javascriptjqueryhtml
user2609980
user2609980

Reputation: 10514

Multiplying a textbox with a cell in a dynamically created table with JQuery

I have a dynamically created table with id called "editTable" that looks as follows: 

  <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>

The 3th td-element consists of a C# textbox that is turned into a element in html.

Now I want to multiply the quantity by the unit price to display this value in the 4th td element next to it. This value should update every time the value in the textbox is adjusted. I am a newbie at JQuery / JavaScript and came up with the following code:

// 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);
});

This doesn't work and only displays NaN in the 4th element. Can anyone help me updating this code to a working version? Any help would be very much appreciated.

Upvotes: 0

Views: 738

Answers (2)

Adam Tal
Adam Tal

Reputation: 5961

I geussed you accidentally switched units and price because it has more logic to change the number of units then the price. I took your html and javascript and tried to change as little as possible to make it work (I'm not saying the solution is perfect, I just don't want to give you a totaly different example of how to do it).

The html (The C# is irrelevant for this problem):

<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>

The javascript/jquery (which should run on load):

$('#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);
}

The problem you had were with jquery. I've created a function that recieves an element (in our case it's your UnitPrice input), then it grabs the closest ancestor of type tr (the row it's in) and from there it does what you've tried to do. You've used jquery selector to get all 2nd cells in all table rows, the closest('tr').find limits it to the current row. You've tried to use .val() on a td element, you should use either .text() or .html(). Instead, You can also add a data-val="<%=value%>" on the td and then use .data('val'). It will be better to take the units directly from $(element).val() and no going to the tr and then back into the td and the input.

To see it working: http://jsfiddle.net/Ynsgf/1/

I hope I didn't caused you any confusion with my explanation and the options I gave you.

Upvotes: 1

Poornima
Poornima

Reputation: 928

Here is another way to write the jquery part.

$('#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);
        });

Upvotes: 1

Related Questions