javascript - 乘以表td值

Question

我有一个表格，其中数量单元格可编辑，当更改数量时，它需要与其他父 td 值相乘。这是我的代码
(即)如果我将数量更改为 2，则父行需要乘以 2

$(document).ready(function(){
  $('.quantity').on('change, keyup',function(){
		var tbvalue=$(this).parents('td').val();
    console.log(tbvalue);
    var val=$(this).val();
    var result=tbvalue*val;
    console.log(result);
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Table calculation</h2>
  <p>Calculaton</p>            
  <table class="table table-hover">
    <thead>
      <tr>
        <th>value1</th>
        <th>value2</th>
        <th>value3</th>
        <th>Quantity</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>10</td>
        <td>5</td>
        <td>4</td>
        <td class="quantity" type="number" contenteditable>1</td>
      </tr>
      <tr>
        <td>8</td>
        <td type>2</td>
        <td>3</td>
        <td class="quantity" type="number" contenteditable>1</td>
      </tr>
      <tr>
        <td>20</td>
        <td>3</td>
        <td>5</td>
        <td class="quantity" type="number"  contenteditable>1</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

尝试一下。使用 $(this).text(); 从每个 td 获取文本，并将其与输入值相乘

$(document).ready(function(){
  $('.quantity').on('change, keyup',function(){
       var val=$(this).text();
 if(val =='' ||  isNaN(val) || val < 1){
 return;
 }
      $(this).siblings().each(function(){
          var tbvalue=$(this).text();
          
          var result= parseInt(tbvalue)*parseInt(val);
          
          $(this).text(result);
      })


 
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Table calculation</h2>
  <p>Calculaton</p>            
  <table class="table table-hover">
    <thead>
      <tr>
        <th>value1</th>
        <th>value2</th>
        <th>value3</th>
        <th>Quantity</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>10</td>
        <td>5</td>
        <td>4</td>
        <td class="quantity" type="number" contenteditable>1</td>
      </tr>
      <tr>
        <td>8</td>
        <td type>2</td>
        <td>3</td>
        <td class="quantity" type="number" contenteditable>1</td>
      </tr>
      <tr>
        <td>20</td>
        <td>3</td>
        <td>5</td>
        <td class="quantity" type="number"  contenteditable>1</td>
      </tr>
    </tbody>
  </table>
</div>