Question

我有一个动态表格，其中包含每行的价格，数量和小计。我正在尝试编写一个javascript方法，自动将每个keyup上的价格和数量值相乘，并将它们作为小计输出。

$('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;
    });

就目前为止我所知道的，控制台日志只是显示＆＃34; undefined＆＃34;作为val1和val2的值。为什么是这样？我误解了.find（）是如何工作的吗？

我尝试过在堆栈交换和谷歌搜索，我似乎无法找到一个基于当前选定行使用nth-child的好例子。

这是表格行的简化版本。每个表行都有一个基于它的行号的id。

<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

Answer 1

在您的代码中，row.find(':nth-child(1)')会选择<td>元素 - <tr>的第一个子元素。但似乎您希望在每行中选择<input>个元素来获取它们的值。

在我的示例中，下面，我给每个输入一个类，将其标识为“数量”，“价格”或“总计”字段。我找到了最接近当前<input>的行。然后我找到该行中每个输入的值，计算总数，并将“总”<input>的值设置为该数字。

我正在使用jQuery的selector context，它在内部等同于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个”<input>子项中选择<td>。类似的东西：

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

Answer 2

jQuery没有value属性....使用val()并假设选择器有效它应该工作

var val1 = row.find(':nth-child(1)').val();

如何从最近的＆＃39;？的第n个元素中获取值？

2 个答案: