当第一个单元格值更改时，我想更改表格的其他单元格值答案

【问题标题】：I want to change table other cell value when first cell value changed当第一个单元格值更改时，我想更改表格的其他单元格值
【发布时间】：2017-06-28 08:07:52
【问题描述】：

我从表中的数据库中获取值以显示在表单中，并在输入字段中保持提供值，而其他值则在单元格中。我想拥有它，所以当我们改变服务价值时，其他领域（例如 fat、calorie、protein、fat) 应该改变。

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

在这个sn-p中，我想根据服务，我们可以更改，并且这个表是在 PHP 中动态创建的。

【问题讨论】：

你有 jquery cdn 的吗？？
不，你可以给我推荐点别的@Gulshan

标签： javascript php input html-table cell

【解决方案1】：

首先将您的值存储在global array 中，以便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);
});

<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];"; }
如何从数据库中检查“值”并从数据库中获取值？
$id1, 'key2' => $id2, 'key3' => $id3, 'key4' => $id4, 'key5' => $id5);回声 json_encode（项目）； } ?> 请调查一下我正在使用 Ajex 发送“价值”，但它不起作用
您好像错过了$ 而echoing json，并且还使用了PDO 或MySQLi，因为mysql_* 功能已不再维护并已正式弃用。跨度>

【解决方案2】：

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

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

【讨论】：