Выбор только элементов внутри одной строки

Я делаю расчетную таблицу с элементами div, а не с td и tr. Каждая строка таблицы должна выполнять математику на основе ввода поля ввода.

<div id = "pricelist_table">
    <div class = "table_header">
        <div id = "model">Model</div>
        <div id = "exw">EXW Also</div>
        <div id = "vat">VAT</div>
        <div id = "msrp">MSRP</div>
    </div>
    <div class = "table_body">
        <div class = "model">XG-C100C</div>
        <div class = "exw-price">1</div>
        <div class = "without-vat">1</div>
        <div class = "msrp-entry"><input class = "msrp-data" name = "msrp-info" placeholder = "enter data"></div>
    <div class = "table_body">
        <div class = "model">PL-AC56 KIT</div>
        <div class = "exw-price">1</div>
        <div class = "without-vat">1</div>
        <div class = "msrp-entry"><input class = "msrp-data" name = "msrp-info" placeholder = "enter data"></div>
    </div>
</div>

и у меня есть такой Jquery, но он ловит все строки.

jQuery(document).ready(function( $ ){   
   $( ".msrp-data" ).keypress(function() {
    var msrp = $(".msrp-data").val();
    var vat =  25;
    var result = msrp * vat;
    $(".exw-price").html(result);
    });
});

Конечная идея состоит в том, чтобы вычислять каждую строку отдельно только при вводе данных.

jquery html

11.06.2019 14:25

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Внутри обработчика для .msrp-data вы можете обратиться к $(this) для того же поля. Чтобы получить значение полей разное в строке, вам необходимо определить их область (например, с помощью $(this).closest(".table_body")):

jQuery(document).ready(function( $ ){   
   $( ".msrp-data" ).keypress(function() {
    var msrp = +$(this).val();
    var vat =  25;
    var result = msrp * vat;
    $(".exw-price",$(this).closest(".table_body")).html(result);
  });
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "pricelist_table">
    <div class = "table_header">
        <div id = "model">Model</div>
        <div id = "exw">EXW Also</div>
        <div id = "vat">VAT</div>
        <div id = "msrp">MSRP</div>
    </div>
    <div class = "table_body">
        <div class = "model">XG-C100C</div>
        <div class = "exw-price">1</div>
        <div class = "without-vat">1</div>
        <div class = "msrp-entry"><input class = "msrp-data" name = "msrp-info" placeholder = "enter data"></div>
    </div>
    <div class = "table_body">
        <div class = "model">PL-AC56 KIT</div>
        <div class = "exw-price">1</div>
        <div class = "without-vat">1</div>
        <div class = "msrp-entry"><input class = "msrp-data" name = "msrp-info" placeholder = "enter data"></div>
    </div>
</div>

(Обратите внимание, что вы также пропустили закрывающую </div> в первой table_body строке!)

Я рекомендую использовать .closest(".table_body"), а не .parent().parent(), чтобы вы не так сильно зависели от конкретной глубины вложенности.

— 11.06.2019 14:39

@ Бармар, да, намного лучше.

— 11.06.2019 14:41

Спасибо вам обоим! Работаем по назначению!

— 11.06.2019 15:22

11.06.2019 14:31