在事件jQuery上选择目标div(行)内的元素
Posted
技术标签:
【中文标题】在事件jQuery上选择目标div(行)内的元素【英文标题】:Select elements within target div (row) on event jQuery 【发布时间】: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 我知道了,我让他去上课了。
【参考方案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);
【讨论】:
以上是关于在事件jQuery上选择目标div(行)内的元素的主要内容,如果未能解决你的问题,请参考以下文章
防止在选定的 Jquery Datepicker 日期上选择日期