Select elements within target div (row) on event jQuery

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:

Table in website

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.

109 thoughts on “Select elements within target div (row) on event jQuery”

Leave a Comment