CODEWITHSUNDEEP
jqueryhtml
Vladimir mans
Vladimir mans

Reputation: 45

Selecting only elements inside same row

I am making calculation table with div elements rather than td and tr. Each row of the table should do the math based on imput field entry.

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

and I have Jquery like this, bit it is catching all rows.

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

End idea is to calculate each row separatly only when data is entered.

Upvotes: 0

Views: 40

Answers (1)

Jamiec
Jamiec

Reputation: 136114

Inside the handler for .msrp-data you can refer to $(this) for the same field. To get the value of other fields in the row you need to scope them (for example using $(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>

(Note you were also missing a closing </div> on the first table_body row!)

Upvotes: 1

Related Questions