乘以表td值

Question

我有数量单元格为可修改时，它需要与其他父母的td值相乘时可编辑表格。这里是我的代码
（即）如果我将数量更改为2，则父行需要乘以2

$(document).ready(function(){ 
 
    $('.quantity').on('change, keyup',function(){ 
 
\t \t 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 this.Get文本并乘以与输入值

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