I want to change table other cell value when first cell value changed

Question

I fetch values from a database in a table to display in a form and keep serving values in input fields and others are in cells. I want to have it so when we changing serving value then other fields (e.g fat, calorie, protein, fat) should be changed.

$(document).ready(function()
{
var oTable = document.getElementById('myTable');
var x = oTable.rows.length;
    function updateMacro()
    {
     var i;
       for(i=1 ; i < x ; i++ )
        var serving = parseFloat($(oTable.rows[i].cells[1].innerHTML).val());
        var calorie = parseFloat($(oTable.rows[i].cells[2].innerHTML).val());
        var fat = parseFloat($(oTable.rows[i].cells[3].innerHTML).val());
        var protien = parseFloat($(oTable.rows[i].cells[4].innerHTML).val());
        var carbs = parseFloat($(oTable.rows[i].cells[5].innerHTML).val());
        
        var calorien= calorie/100 * serving;
        
        var fatn= fat/100 * serving;
        var protienn= protien/100 * serving;
        var carbsn= carbs/100 * serving;
        
        parseFloat($(oTable.rows[i].cells[2].innerHTML).val(calorien));
        parseFloat($(oTable.rows[i].cells[3].innerHTML).val(fatn));
        parseFloat($(oTable.rows[i].cells[4].innerHTML).val(protienn));
        parseFloat($(oTable.rows[i].cells[5].innerHTML).val(carbsn));
        //var total = (price + 1) * 1.05;
        //var total = total.toFixed(2);
        //$("#total_price_amount").val(total);        
    }
    $(document).on("change, keyup", ".macrotd", updateMacro);
    
});

 <input class="span4 input-big" id="dare_price" name="price" size="30" type="text" />
<input class="span4 input-big" id="total_price_amount" readonly="readonly" value=""/>

 <input class="span4 input-big" id="dare_price2" name="price" size="30" type="text" />
<input class="span4 input-big" id="total_price_amount2" readonly="readonly" value=""/>
<table id="myTable" style="width:100%">
  <tbody><tr>     
       <th>Item Name</th>
      <th>Serving</th>
      <th>Calories</th>
      <th>Fat</th>
      <th>Protien</th>
      <th>Carbs</th>      
      
  </tr>
                
  <tr>
    
      <td>egg</td>
      <td class="macrotd"><input type="number" value="1"></td>    
      <td class="calo">83</td>
      <td class="fat">6.4</td>
      <td class="pro">6.4</td>
      <td class="carb">1.1</td>      
    
  
  </tr>
  
  <tr>
    
      <td>rice</td>
      <td class="macrotd"><input type="number" value="100"></td>    
      <td class="calo">115</td>
      <td class="fat">0.3</td>
      <td class="pro">2.5</td>
      <td class="carb">25.6</td>      
    
  
  </tr>
  
  <tr>
    
      <td>paneer</td>
      <td class="macrotd"><input type="number" value="100"></td>    
      <td class="calo">265</td>
      <td class="fat">21</td>
      <td class="pro">18</td>
      <td class="carb">0</td>      
    
  
  </tr>
  
  <tr>
    
      <td>brown rice</td>
      <td class="macrotd"><input type="number" value="100"></td>    
      <td class="calo">111</td>
      <td class="fat">0.9</td>
      <td class="pro">2.6</td>
      <td class="carb">23</td>      
    
  
  </tr>
  
  <tr>
    
      <td>Chicken</td>
      <td class="macrotd"><input type="number" value="100"></td>    
      <td class="calo">165</td>
      <td class="fat">3.6</td>
      <td class="pro">31</td>
      <td class="carb">0</td>      
    
  
  </tr>
  
  <tr>
    
      <td>milk</td>
      <td class="macrotd"><input type="number" value="100"></td>    
      <td class="calo">69</td>
      <td class="fat">4.2</td>
      <td class="pro">3.3</td>
      <td class="carb">4.5</td>      
    
  
  </tr>
  </tbody></table>

In this snippet, I want to change fat, protein, carb, calories according to serving, which we can change, and this table is created dynamically in PHP.

no, you can suggest me something else @Gulshan – Ayush Khandelwal Feb 10 '17 at 04:50 — Ayush Khandelwal, Feb 10 '17 at 04:50

The KNVB · Answer 1 · 2017-02-10T09:59:42.020

Here is sample code that would update the Calories column value when the serving value change:

  $(document).ready(function() {
    var oTable = document.getElementById('myTable'),
      row;
    for (var i = 0; i < oTable.rows.length; i++) {
      row = oTable.rows[i];
      $(row).find(".macrotd > input").each(setHandler);

    }
  });

  function setHandler() {
    $(this).keyup(doUpdate);
  }

  function doUpdate() {
    var row = $(this).parent().parent();
    var servingValue=$(this).val();
    var caloValue=servingValue*11.0;
    $(row).find(".calo").text(caloValue);
  }

score 0 · Accepted Answer · answered Feb 10 '17 at 14:24

First store your values in global array for eggs, rice, paneer, brown rice, Chicken & milk to calculate

var eggs        = [83, 6.4, 6.4, 1.1];

$(document).ready(function()
{
 var eggs   = [83, 6.4, 6.4, 1.1];
 var rice   = [115, 0.3, 2.5, 25.6];
 var paneer   = [265, 21, 18, 0];
 var brownrice = [111, 0.9, 2.6, 23];
 var Chicken  = [165, 3.6, 31, 0];
 var milk  = [69, 4.2, 3.3, 4.5];
 
 var oTable = document.getElementById('myTable');
 var x = oTable.rows.length;
 
 function updateMacro()
 {
  var i;
  for(i=1 ; i < x ; i++ )
  {
   var value = oTable.rows[i].cells[0].innerHTML;
   var serving = oTable.rows[i].cells[1].children[0].value;
   
   var myArray;
   if(value == "Egg")
    myArray = eggs;
   else if(value == "Rice")
    myArray = rice;
   else if(value == "Paneer")
    myArray = paneer;
   else if(value == "Brown Rice")
    myArray = brownrice;
   else if(value == "Chicken")
    myArray = Chicken;
   else if(value == "Milk")
    myArray = milk;
   
   var calorien = myArray[0]/100 * serving;   
   var fatn  = myArray[1]/100 * serving;
   var protienn = myArray[2]/100 * serving;
   var carbsn  = myArray[3]/100 * serving;
   
   oTable.rows[i].cells[2].innerHTML = parseFloat(Math.round(calorien * 100) / 100);
   oTable.rows[i].cells[3].innerHTML = parseFloat(Math.round(fatn * 100) / 100);
   oTable.rows[i].cells[4].innerHTML = parseFloat(Math.round(protienn * 100) / 100);
   oTable.rows[i].cells[5].innerHTML = parseFloat(Math.round(carbsn * 100) / 100);
  }
 }
 
 $("input[type=number]").on("change paste keyup propertychange", updateMacro);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<table id="myTable" style="width:100%">
 <tr>     
  <th>Item Name</th>
  <th>Serving</th>
  <th>Calories</th>
  <th>Fat</th>
  <th>Protien</th>
  <th>Carbs</th>
 </tr>
 
 <tr>
  <td>Egg</td>
  <td class="macrotd"><input type="number" value="100"></td>    
  <td class="calo">83</td>
  <td class="fat">6.4</td>
  <td class="pro">6.4</td>
  <td class="carb">1.1</td>
 </tr>
  
 <tr>
  <td>Rice</td>
  <td class="macrotd"><input type="number" value="100"></td>    
  <td class="calo">115</td>
  <td class="fat">0.3</td>
  <td class="pro">2.5</td>
  <td class="carb">25.6</td>
 </tr>
 
 <tr>
  <td>Paneer</td>
  <td class="macrotd"><input type="number" value="100"></td>    
  <td class="calo">265</td>
  <td class="fat">21</td>
  <td class="pro">18</td>
  <td class="carb">0</td>
 </tr>
  
 <tr>
  <td>Brown Rice</td>
  <td class="macrotd"><input type="number" value="100"></td>    
  <td class="calo">111</td>
  <td class="fat">0.9</td>
  <td class="pro">2.6</td>
  <td class="carb">23</td>
 </tr>
  
 <tr>
  <td>Chicken</td>
  <td class="macrotd"><input type="number" value="100"></td>    
  <td class="calo">165</td>
  <td class="fat">3.6</td>
  <td class="pro">31</td>
  <td class="carb">0</td>
 </tr>
  
 <tr>
  <td>Milk</td>
  <td class="macrotd"><input type="number" value="100"></td>    
  <td class="calo">69</td>
  <td class="fat">4.2</td>
  <td class="pro">3.3</td>
  <td class="carb">4.5</td>
 </tr>
</table>

while($row = mysqli_fetch_array($result)) { $id1 =$row['id1']; $id2 =$row['id2']; $id3 =$row['id3']; $id4 =$row['id4']; $item =$row['itemtype']; echo "var $item = [$id1, $id2, $id3, $id4]; "; } — Zahid Zuhair, Feb 11 '17 at 12:47
How to check "value" from the database and get values from database in this? — Ayush Khandelwal, Feb 11 '17 at 15:31
$id1, 'key2' => $id2, 'key3' => $id3, 'key4' => $id4, 'key5' => $id5); echo json_encode(item); } ?> please look into this I am using Ajex to send "value" but it's not working — Ayush Khandelwal, Feb 12 '17 at 13:16
It seems that you missed `$` while `echoing json`, and also use _PDO or MySQLi_ as [mysql_*](http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php) function are no longer maintained and are officially deprecated. — Zahid Zuhair, Feb 13 '17 at 05:43

I want to change table other cell value when first cell value changed

2 Answers2