事件 jQuery 中目标 div（行）内的 Select 元素

Question

I have a table from which I need to select all of the values of the row after an event done in the same row (in this case is a keyup event) with jQuery . The table could have many rows but the selection has to be on the items of the row event.

This is the HTML of the table:

<table class="table" id="form-table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Description</th>
            <th scope="col">Qty</th>
            <th scope="col">Price</th>
            <th scope="col">Discount</th>
            <th scope="col">Amount</th>
            <th scope="col">Hidden</th>
        </tr>
    </thead>
    <tbody>
        <tr id="row-1">
            <th scope="row">1</th>
            <td class="description-column">
                <div class="form-group">
                    <select class="form-control" id="companySelect">
                        {% for product in product_options %}
                        <option>{{ product }}</option>
                        {% endfor %}
                    </select>
                </div>
            </td>
            <td class="qty-column">
                <div class="form-group">
                    <input type="number" class="form-control" id="qty" placeholder="Qty" min="0" step="1">
                </div>
            </td>
            <td class="price-column">
                <div class="form-group">
                    <input type="number" class="form-control" id="price" min="0.01" placeholder="Price">
                </div>
            </td>
            <td class="discount-column">
                <div class="form-group">
                    <input type="number" class="form-control" id="discount" placeholder="0" min="0.01" max="99.99">
                </div>
                <div>%</div>
            </td>
            <td class="amount-column"></td>
            <td class="hidden-column">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="hiddenCheck">
                </div>
            </td>
        </tr>
    </tbody>
</table>

And looks like this on the site:

For more context: I am making a quote app in which I'll type the price and quantity of each item in each row and I need to update the "amount" column after each keyup . So I need to know how to select the proper "qty", "price", "discount" and "amount" id's of the row typed to do that.

Answer 1

Firstly, The id attribute is unique, So you should replace it with class like this

<input type="number" class="form-control qty"  placeholder="Qty" min="0" step="1">

Secondly, You can get the tr by using .closest() like this $(this).closest("tr")

Finally, You can calculate individual row by creating another method named updateAmount_per_row like below:

function updateAmount_per_row(tr){
  var qTy = getValue_by_className(tr, '.qty-column .qty');
  var price = getValue_by_className(tr, '.price-column .price');
  var amount = qTy * price;
  
  tr.find('.amount-column').html(amount);
}

 $(".qty-column, .price-column").on("keyup", function(){ var tr = $(this).closest("tr"); updateAmount_per_row(tr); }); function updateAmount_per_row(tr){ var qTy = getValue_by_className(tr, '.qty-column.qty'); var price = getValue_by_className(tr, '.price-column.price'); var amount = qTy * price; tr.find('.amount-column').html(amount); } function getValue_by_className(tr, className){ var value = parseInt(tr.find(className).val(), 10); return value >= 0? value: 1; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table" id="form-table"> <thead> <tr> <th scope="col">#</th> <th scope="col">Description</th> <th scope="col">Qty</th> <th scope="col">Price</th> <th scope="col">Discount</th> <th scope="col">Amount</th> <th scope="col">Hidden</th> </tr> </thead> <tbody> <tr id="row-1"> <th scope="row">1</th> <td class="description-column"> <div class="form-group"> <select class="form-control" class="companySelect"> <option>Product A</option> <option>Product B</option> </select> </div> </td> <td class="qty-column"> <div class="form-group"> <input type="number" class="form-control qty" placeholder="Qty" min="0" step="1"> </div> </td> <td class="price-column"> <div class="form-group"> <input type="number" class="form-control price" min="0.01" placeholder="Price"> </div> </td> <td class="discount-column"> <div class="form-group"> <input type="number" class="form-control" class="discount" placeholder="0" min="0.01" max="99.99"> </div> <div>%</div> </td> <td class="amount-column"></td> <td class="hidden-column"> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="hiddenCheck"> </div> </td> </tr> <tr id="row-2"> <th scope="row">2</th> <td class="description-column"> <div class="form-group"> <select class="form-control" class="companySelect"> <option>Product A</option> <option>Product B</option> </select> </div> </td> <td class="qty-column"> <div class="form-group"> <input type="number" class="form-control qty" placeholder="Qty" min="0" step="1"> </div> </td> <td class="price-column"> <div class="form-group"> <input type="number" class="form-control price" min="0.01" placeholder="Price"> </div> </td> <td class="discount-column"> <div class="form-group"> <input type="number" class="form-control" class="discount" placeholder="0" min="0.01" max="99.99"> </div> <div>%</div> </td> <td class="amount-column"></td> <td class="hidden-column"> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="hiddenCheck"> </div> </td> </tr> </tbody> </table>

Answer 2

Using Mai Phuong answer as testing I managed to make it work by using the target property instead of this , because this for some reason was referencing the whole document ( #document ).

Here is the keyup event listener:

  $('.price, .qty, .discount').keyup((event) => {
    let tr = event.target.closest('tr');
    updateAmount(tr);
  });

and here's the final updateAmount function:

function updateAmount(tr) {
  let qty = $(tr).find('.qty').val();
  let price = $(tr).find('.price').val();
  let discount = $(tr).find('.discount').val();

  let amount = (qty * price * (100 - discount)) / 100;

  $(tr).find('.amount').html(amount);
}