如何从最接近的"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屋！