如何使用jquery获取每行产品？

Question

如何在表格中获得每行产品？

Example in table:

data1 data2 data3  total
1      2      3     6
2      2      3     12 

这是我创建的html表：

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".txtMult input").keyup(multInputs);

  function multInputs() {
    // for each row:
    $("tr.txtMult").each(function() {
      // get the values from this row:
      var $data1 = $('.data1', this).val();
      var $data2 = $('.data2', this).val();
      var $data3 = $('.data3', this).val();
      var $total = ($data3 * 1) * ($data2 * 1) * ($data3 * 1);
      $('.multTotal', this).val($total);
    });
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>
      data1
    </th>
    <th>
      data2
    </th>
    <th>
      data3
    </th>
    <th>
      total
    </th>
  </tr>
  <tr class="txtMult">
    <td>
      <input name="data1" class="data1" />
    </td>
    <td>
      <input name="data2" class="data2" />
    </td>
    <td>
      <input name="data3" class="data3" />
    </td>
    <td>
      <input class="multTotal" type="number" />
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

var $data1 = $( ".data1" ).val();
var $data2 = $( ".data2" ).val();
var $data3 = $( ".data3" ).val();
var $total = ($data1) * ($data2) * ($data3);
$('.multTotal').val($total);

将每个var中的val加倍，然后将总数放在multiTotal中：）

Answer 2

运行此选项并正确地相乘。你有它做data3 * data2 * data3而不是1 2和3

$(document).ready(function() {
  $(".txtMult input").keyup(multInputs);

  function multInputs() {
    // for each row:
    $("tr.txtMult").each(function() {
      // get the values from this row:
      var $data1 = $('.data1', this).val();
      var $data2 = $('.data2', this).val();
      var $data3 = $('.data3', this).val();
      var $total = ($data1) * ($data2) * ($data3);
      $('.multTotal', this).val($total);
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>
      data1
    </th>
    <th>
      data2
    </th>
    <th>
      data3
    </th>
    <th>
      total
    </th>
  </tr>
  <tr class="txtMult">
    <td>
      <input name="data1" class="data1" />
    </td>
    <td>
      <input name="data2" class="data2" />
    </td>
    <td>
      <input name="data3" class="data3" />
    </td>
    <td>
      <input class="multTotal" type="number" />
    </td>
  </tr>
</table>

Answer 3

$(document).ready(function() {
  $(".txtMult input").keyup(multInputs);

  function multInputs() {
    // for each row:
    $("tr.txtMult").each(function() {
      // get the values from this row:
      var $data1 = $('.data1', this).val();
      var $data2 = $('.data2', this).val();
      var $data3 = $('.data3', this).val();
      var $total = ($data1 * 1) * ($data2 * 1) * ($data3 * 1);
      $('.multTotal', this).val($total);
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>
      data1
    </th>
    <th>
      data2
    </th>
    <th>
      data3
    </th>
    <th>
      total
    </th>
  </tr>
  <tr class="txtMult">
    <td>
      <input name="data1" class="data1" />
    </td>
    <td>
      <input name="data2" class="data2" />
    </td>
    <td>
      <input name="data3" class="data3" />
    </td>
    <td>
      <input class="multTotal" type="number" />
    </td>
  </tr>
</table>

Answer 4

谢谢大家的帮助。

我得到了这些

的解决方案

`$(document).on("keyup", ".data1, .data2, .data3", function() {
    var tablerow = $(this).parent("td").parent("tr");

    var data1 = tablerow.find(".data1").val();
    var data2 = tablerow.find(".data2").val();
    var data3 = tablerow.find(".data3").val();

    var total = data1 * data2 * data3;
    tablerow.find(".multTotal").val(total);
});
`