如何使用javascript将任意文本框的焦点上的两个值相乘？

Question

我有一张表，其中有一些列：

<table id="TableID1">
    <thead>
        <tr>
            <th>Sr. No.</th>
            <th>Item Code</th>
            <th>Description</th>
            <th>Quantity</th>
            <th width="10%">Price</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody>
         <tr>
            <td>5</td>
            <td>TE0011200MAH3VG00</td>
            <td>3 d1,</td>
            <td>12</td>
            <td><input type="number"></td>
            <td><input type="number"></td>
        </tr>
        <tr>
            <td>6</td>
            <td>SG0246100KAD1HG10</td>
            <td>3 d1,</td>
            <td>12</td>
            <td><input type="number"></td>
            <td><input type="number"></td>
        </tr>
    </tbody>
</table>

如果用户在＆＃34; Price＆＃34;中添加了一些价值。然后我乘以＆＃34;数量＆＃34;和＆＃34;价格＆＃34;并在第三栏中显示结果＆＃34; Total＆＃34;在同一行。它必须运行时间。请给我一个javascript或jQuery的解决方案。

Answer 1

你可以这样做：

＆＃13;

＆＃13;

$("#TableID1").find("input").change(function(){
	var getVal = $(this).parent().index();
  var multiply = Number($(this).parent().parent().find("td").eq(getVal-1).text()) * $(this).val();
 $(this).parent().parent().find("td").eq(getVal+1).find("input").val(multiply)
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="TableID1">
  <thead>
    <tr>
      <th>Sr. No.</th>
      <th>Item Code</th>
      <th>Description</th>
      <th>Quantity</th>
      <th width="10%">Price</th>
      <th>Total</th>

    </tr>
  </thead>

  <tbody>
    <tr>
      <td>5</td>
      <td>TE0011200MAH3VG00</td>
      <td>3 d1,</td>
      <td>12</td>
      <td>
        <input type="number">
      </td>
      <td>
        <input type="number">
      </td>
    </tr>
    <tr>
      <td>6</td>
      <td>SG0246100KAD1HG10</td>
      <td>3 d1,</td>
      <td>12</td>
      <td>
        <input type="number">
      </td>
      <td>
        <input type="number">
      </td>
    </tr>

  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

希望有所帮助：）

Answer 2

附加输入事件处理程序并根据值更新输入。

＆＃13;

＆＃13;

$(document).ready(function() {
  $('tr td:nth-child(5) input').on('input', function() {
    // get input in last column and set value
    $(this).closest('tr').find('td:nth-child(6) input').val(
      // get value from input, and use `+` to convert string to number
      +$(this).val() *
      // get quantity value and multiply
      +$(this).closest('tr').find('td:nth-child(4)').text());
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="TableID1">
  <thead>
    <tr>
      <th>Sr. No.</th>
      <th>Item Code</th>
      <th>Description</th>
      <th>Quantity</th>
      <th width="10%">Price</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>5</td>
      <td>TE0011200MAH3VG00</td>
      <td>3 d1,</td>
      <td>12</td>
      <td>
        <input type="number">
      </td>
      <td>
        <input type="number">
      </td>
    </tr>
    <tr>
      <td>6</td>
      <td>SG0246100KAD1HG10</td>
      <td>3 d1,</td>
      <td>12</td>
      <td>
        <input type="number">
      </td>
      <td>
        <input type="number">
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;