如何从最接近的"tr"的第n个元素中获取值? [英] how can I get a value from the nth element of the closest 'tr'?
问题描述
我有一个动态表,其中每行包含价格,数量和小计.我正在尝试编写一个javascript方法,该方法会自动将每次键入的价格和数量值乘以并将其作为小计输出.
I have a dynamic table that contains price, quantity and subtotal on each row. I am trying to write a javascript method that automatically multiples the price and quantity values on each keyup and outputs them as the subtotal.
$('input.value').keyup( function() {
var row = $(this).closest('tr');
var val1 = row.find(':nth-child(1)').value;
var val2 = row.find(':nth-child(2)').value;
console.log(val1);
console.log(val2);
output = row.find(':nth-child(3)');
output.value = val1 * val2;
});
到目前为止,控制台日志仅显示未定义"为val1和val2的值.为什么是这样?我误解了.find()的工作原理吗?
This is as far as I've gotten so far, the console log just shows "undefined" as the values for val1, and val2. Why is this? Am I misunderstanding how .find() works?
我尝试在堆栈交换和Google上进行搜索,但似乎找不到基于当前所选行使用nth-child的好例子.
I have tried searching on both stack exchange and google, and I can't seem to find a good example of using nth-child based on the currently selected row.
这是表格行的简化版本.每个表格行都有一个基于其行号的ID.
Here is a simplified version of the table row. Each table row has an id based on it's row number.
<tr id = "row_#">
<td>
<?php echo $this->Form->text("Items.{$key}.quantity", array('value' => $item['quantity'], 'class' => 'value')); ?>
</td>
<td>
<?php echo $this->Form->text("Items.{$key}.price", array('value' => $item['price'], 'class' => 'value')); ?>
</td>
<td>
<?php echo $this->Form->text("Items.{$key}.total", array('value' => number_format( $item['price']*$item['quantity'], 2), 'class' => 'subtotal')); ?>
</td>
</tr>
我正在使用jquery和cakephp 2.7
I am using jquery, and cakephp 2.7
推荐答案
在您的代码中,row.find(':nth-child(1)')
选择一个<td>
元素-<tr>
的第一个子元素.但是似乎您想在每一行中选择<input>
元素以获取其值.
In your code, row.find(':nth-child(1)')
selects a <td>
element -- the first child of the <tr>
. But it seems that you want to select <input>
elements in each row to get their values.
在下面的示例中,我为每个输入提供了一个将其标识为数量",价格"或总计"字段的类.我找到最接近当前<input>
的行.然后,我找到该行中每个输入的值,计算总数,然后将总计" <input>
的值设置为该数字.
In my example, below, I've given each input a class that identifies it as a "quantity", "price", or "total" field. I find the closest row to the current <input>
. Then I find the value for each input within that row, calculate the total, and set the value of the "total" <input>
to that number.
我正在使用jQuery的选择器上下文,它在内部等同于
I'm using jQuery's selector context, which is internally equivalent to find()
.
$('input.value').keyup(function() {
var $row = $(this).closest('tr');
$output = jQuery('input.total', $row),
quantity = jQuery('input.quantity', $row).val(),
price = jQuery('input.price', $row).val(),
total = quantity * price;
$output.val(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" class="value quantity" /></td>
<td><input type="text" class="value price" /></td>
<td><input type="text" class="total" /></td>
</tr>
<tr>
<td><input type="text" class="value quantity" /></td>
<td><input type="text" class="value price" /></td>
<td><input type="text" class="total" /></td>
</tr>
<tr>
<td><input type="text" class="value quantity" /></td>
<td><input type="text" class="value price" /></td>
<td><input type="text" class="total" /></td>
</tr>
</table>
如果愿意,可以使用nth-child
选择器而不是类.但是请记住,第n个子元素是<td>
元素,而不是<input>
元素.您需要在每个第n个" <td>
子级中选择<input>
.像这样:
You can use nth-child
selectors rather than classes, if you prefer. But remember that "nth" children are the <td>
elements, not the <input>
elements. You'll need to select the <input>
within each "nth" <td>
child. Something like:
$row.find('td:nth-child(1) input').val()
请参见以下示例:
$('input.value').keyup(function() {
var $row = $(this).closest('tr');
$output = $row.find('td:nth-child(3) input'),
quantity = $row.find('td:nth-child(1) input').val(),
price = $row.find('td:nth-child(2) input').val(),
total = quantity * price;
$output.val(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" class="value" /></td>
<td><input type="text" class="value" /></td>
<td><input type="text" /></td>
</tr>
<tr>
<td><input type="text" class="value" /></td>
<td><input type="text" class="value" /></td>
<td><input type="text" /></td>
</tr>
<tr>
<td><input type="text" class="value" /></td>
<td><input type="text" class="value" /></td>
<td><input type="text" /></td>
</tr>
</table>
这篇关于如何从最接近的"tr"的第n个元素中获取值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!