我想在第一个单元格值更改时更改表格其他单元格值

Question

我从表中的数据库中获取值以在表单中显示，并在输入字段中保留服务值，而其他值在单元格中。当我们改变服务价值然后改变其他字段时（例如胖，卡路里，蛋白质，脂肪）应该改变。

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

在这个片段中，我想根据服务更改脂肪，蛋白质，碳水化合物，卡路里，我们可以改变，这个表是用PHP动态创建的。

Answer 1

以下是在服务值更改时更新Calories列值的示例代码：

  $(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);
  }

Answer 2

首先将您的值存储在eggs, rice, paneer, brown rice, Chicken & milk 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);
});

＆＃13;

＆＃13;

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

＆＃13;

Can't locate Net/SSH/Perl.pm in @INC (@INC contains: /etc/perl /usr/local/lib/perl/5.14.2 /usr/local/share/perl/5.14.2 /usr/lib/perl5 /usr/share/perl5 /usr/lib/perl/5.14 /usr/s
BEGIN failed--compilation aborted at (eval 4) line 3.

＆＃13;

＆＃13;

＆＃13;