How to auto calculate table rows using java-script?

user_3884857 0
Viewed 150

Below Code is calculating Profit for the 1st row. I am generating another row on button click using javascript [Code give below]. How do I differentiate parent row and child rows in javascript for calculating auto profit for different rows?

<!-- Calculate Auto Profit -->
<script type="text/javascript">
    $(document).ready(function(e) {
        $("input").change(function() {
            var finalprofit = 0;
            $("input[id=prod_price],input[id=fashionf_price]").each(function() {
                finalprofit = parseInt($(this).val()) - finalprofit;
            })
            $("input[id=profit]").val(finalprofit);
        });
    });
</script>

<!-- For add New Row and Delete Row -->
<script type="text/javascript">
var html = '<tr><td><input type="date" name="current_date" id="current_date" value="" /></td><td><input type="text" name="cust_name" id="cust_name" value=""/></td><td><input type="text" name="product" id="product" value=""/></td><td><input type="text" name="prod_price" id="price" value="0" /></td><td><input type="text" name="fashionf_price" id="price" value="0" /></td><td><input type="text" name="profit" id="profit" value="0" /></td><td><button class="remove" /> - </td></tr>';
    $(function() {
        //$('tbody').sortable();
        $('#addRow').click(function() {
            $('tbody').append(html);
        });

        $(document).on('click', '.remove', function() {
            $(this).parents('tr').remove();
        });
    });
</script>


<form method="post" action="AddInventoryServlet" name="formBook">
    <table class="tablecontent" id="calc">
        <thead>
            <tr>
                <th>Date</th>
                <th>Customer Name</th>
                <th>Product</th>
                <th>Buy Price</th>
                <th>Sell Price</th>
                <th>Profit</th>
            </tr>
        </thead>
        <tbody>
            <tr class="package-row">
                <td><input type="date" name="current_date" id="current_date" value="" /></td>
                <td><input type="text" name="cust_name" id="cust_name" value="" /></td>
                <td><input type="text" name="product" id="product" value="" /></td>
                <td><input type="text" name="prod_price" id="prod_price" value="0" /></td>
                <td><input type="text" name="fashionf_price" id="fashionf_price"    value="0" /></td>
                <td><input type="text" name="profit" id="profit" value="0" /></td>
                <td><button class="remove" /> -</td>
            </tr>
        </tbody>
    </table>
    <div id="trsubmit">
        <input type="submit" value="Submit" name="submit" />
    </div>
</form>

1

html jquery javascript
1 Answers

You need to use class instead of id because there are multiple inputs .In below code i have use $(this).closest('tr') to get closest tr and then using this we can calculate profit of particular row only.

Demo Code :

//use clas instead of id
var html = '<tr><td><input type="date" name="current_date" id="current_date" value="" /></td><td><input type="text" name="cust_name" id="cust_name" value=""/></td><td><input type="text" name="product" id="product" value=""/></td><td><input type="text" name="prod_price" class="prod_price" value="0" /></td><td><input type="text" name="fashionf_price" class="fashionf_price" value="0" /></td><td><input type="text" name="profit" class="profit" value="0" /></td><td><button class="remove"> - </button></td></tr>';


$('#addRow').click(function () {
  $('tbody').append(html);
});

$(document).on('click', '.remove', function () {
  $(this).parents('tr').remove();
});

//tr are added dynamcially so 
$(document).on("change", "input", function () {
  var slector = $(this).closest('tr');
  var finalprofit = 0;
  //finding tinput closest tr 
  slector.find("input[class=prod_price],input[class=fashionf_price]").each(function () {
    console.log($(this).val())
    finalprofit = parseInt($(this).val()) - finalprofit;
  })
  //this closest profit class
  slector.find("input[class=profit]").val(finalprofit);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="AddInventoryServlet" name="formBook">
  <table class="tablecontent" id="calc">
    <thead>
      <tr>
        <th>Date</th>
        <th>Customer Name</th>
        <th>Product</th>
        <th>Buy Price</th>
        <th>Sell Price</th>
        <th>Profit</th>
      </tr>
    </thead>
    <tbody>
      <!--use class instead of id for some inputs-->
      <tr class="package-row">
        <td><input type="date" name="current_date" id="current_date" value="" /></td>
        <td><input type="text" name="cust_name" id="cust_name" value="" /></td>
        <td><input type="text" name="product" id="product" value="" /></td>
        <td><input type="text" name="prod_price" class="prod_price" value="0" /></td>
        <td><input type="text" name="fashionf_price" class="fashionf_price" value="0" /></td>
        <td><input type="text" name="profit" class="profit" value="0" /></td>
        <td><button class="remove" /> -</td>
      </tr>
    </tbody>
  </table>
  <button type="button" id="addRow" >Add row</button>
  <div id="trsubmit">
    <input type="submit" value="Submit" name="submit" />
  </div>
</form>

user_106064000
Related