在事件jQuery上选择目标div（行）内的元素答案

【问题标题】：Select elements within target div (row) on event jQuery在事件jQuery上选择目标div（行）内的元素
【发布时间】：2021-04-30 20:16:07
【问题描述】：

我有一个表，在使用jQuery 在同一行中完成事件（在本例中为keyup 事件）之后，我需要从中选择该行的所有值。表格可以有很多行，但选择必须在行事件的项目上。

这是表格的 HTML：

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

在网站上看起来像这样：

有关更多上下文：我正在制作一个报价应用程序，我将在其中输入每行中每个项目的价格和数量，并且我需要在每个 keyup 之后更新“金额”列。所以我需要知道如何为输入的行选择正确的“数量”、“价格”、“折扣”和“金额”ID。

【问题讨论】：

$(this).closest("tr")?
您不应在每一行中重复 ID。改用类。 $(this).closest("tr").find(".qty")
@Barmar OP 正在使用 id，所以我们无法通过类名 <input type="number" class="form-control" id="qty" 找到它
@MaiPhuong 我知道了，我让他去上课了。

标签： javascript jquery jquery-selectors

【解决方案1】：

首先，id属性是唯一的，所以你应该像这样用class替换它

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

其次，你可以像这样$(this).closest("tr")使用.closest()得到tr

最后，您可以通过创建另一个名为 updateAmount_per_row 的方法来计算单个行，如下所示：

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>

【讨论】：

@Carlos Gonzalez 这能回答你的问题吗？不要忘记给我一个赞成票并将我的答案标记为已解决，请单击对勾以帮助将来的读者，兄弟^^！
我似乎无法让它以这种方式工作。我在keyup 之后执行console.log(this) 后发现this 正在引用整个文档（#document）。正因为如此，其他似乎都不起作用（找到最接近的 'tr' 和其他所有东西）。

【解决方案2】：

使用Mai Phuong 答案作为测试，我设法通过使用target 属性而不是this 使其工作，因为this 出于某种原因引用了整个文档（#document）。

这里是keyup 事件监听器：

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

这是最终的updateAmount 函数：

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);
}

【讨论】：