CODEWITHSUNDEEP
javascriptjqueryhtml
Harish Karthick
Harish Karthick

Reputation: 720

multiply table td value

I have table with quantity cell as editable when change quantity it need to multiply with other parent td value.Here is my code
(i.e) if i change quantity to 2 then the parent rows need multiply by 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>

Upvotes: 0

Views: 868

Answers (1)

XYZ
XYZ

Reputation: 4480

Try this.Get the text from each td using this $(this).text(); and multiply that with input value

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

Upvotes: 4

Related Questions