Mam dynamicznie stworzony stół z identyfikatorem "Edittable", który wygląda następująco:

  <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. element TD składa się z pola tekstowego C #, który jest obracany do elementu w HTML.

Teraz chcę pomnożyć ilość przez cenę jednostki, aby wyświetlić tę wartość na 4 elemencie TD obok niego. Ta wartość powinna aktualizować za każdym razem, gdy wartość w polu tekstowym jest regulowana. Jestem nowicjuszem w jQuery / JavaScript i wymyślił następujący kod:

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

To nie działa i wyświetla tylko NAN w 4 elemencie. Czy ktoś może pomóc mi aktualizować ten kod do wersji roboczej? Każda pomoc byłaby bardzo doceniana.

0
Erwin Rooijakkers 19 listopad 2013, 19:55

2 odpowiedzi

Najlepsza odpowiedź

Uzasadniłem przypadkowo przełączane jednostki i cenę, ponieważ ma więcej logiki, aby zmienić liczbę jednostek, a następnie cena. Wziąłem twój HTML i JavaScript i próbowałem zmienić tak mało, jak to możliwe, aby to pracować (nie mówię, że rozwiązanie jest idealne, po prostu nie chcę dać ci trwałego innego przykładu, jak to zrobić).

HTML (C # # jest nieistotny dla tego problemu):

<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 (co powinno działać na obciążeniu):

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

Problem, który miałeś z jQuery. Stworzyłem funkcję, która otrzyma element (w naszym przypadku jest to twoje wejście UNITPRICE), a następnie chwyta najbliższy przodek typu tr (Wiersz, w którym się znajduje) i stamtąd to, co próbowałeś zrobić. Użyłeś selektora jQuery, aby uzyskać wszystkie 2 komórki we wszystkich wierszach tabeli, closest('tr').find ogranicza go do bieżącego wiersza. Próbowałeś użyć .val() na elemencie TD, należy użyć .text() lub .html(). Zamiast tego można dodać data-val="<%=value%>" na TD, a następnie użyj .data('val'). Lepiej będzie pobrać jednostki bezpośrednio z $ (element) .val () i nie przejdzie do TR, a następnie z powrotem do TD i wejścia.

Aby zobaczyć to działanie: http://jsfiddle.net/ynsgf/1/

Mam nadzieję, że nie spowodowałem, że nie miałeś żadnego zamieszania z moim wyjaśnieniem i opcjami, które ci dałem.

1
Adam Tal 20 listopad 2013, 11:15

Oto kolejny sposób na napisanie części 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);
        });
1
Poornima 19 listopad 2013, 16:21