带有laravel刀片模板循环和总和的javascript

Question

我正在尝试使用 java 脚本对我的表进行计算，但我不知道如何将它与其余的 id 循环。现在我只能计算单个项目如何使这个倍数这里是结果

正如你所见，只有 id 1 得到结果，而 id 2 为 null 我怎样才能使这项工作在这里是我的 java 脚本

function calc(){     
         var n1 = parseFloat(document.getElementById('n1').value);
         var n2 = parseFloat(document.getElementById('n2').value);
         var oper = document.getElementById('result').value = n1*4+n2; 
}

  <table id="my-table" class="table table-hover table-bordered">
                <thead>
                    <tr >
                      <th class="text">NAME</th>
                      <th class="text">A/P</th>
                      <th class="text">H/W</th>
                      <th class="text">Result</th>
                    </tr>
                 </thead>
                 <tbody>
                 @foreach($scores as $index => $score) 
                 <tr> 
                 <td>{{$score->lead->student_name}} <input type="hidden" name="scores[{{$loop->index}}][id]" value="{{$score->id}}"></td> 
                 <td style="text-align:center"><input id="n1" type="text" name="scores[{{$loop->index}}][jan_ap]" value="{{$score->jan_ap}}" class="input" autocomplete="off"></td> 
                 <td style="text-align:center"><input id="n2" type="text" name="scores[{{$loop->index}}][jan_hm]" value="{{$score->jan_hm}}"  class="input" autocomplete="off"></td> 
                 <td style="text-align:center"><input id="result" type="text" name="scores[{{$loop->index}}][result]" value="{{$score->result}}"  class="input" autocomplete="off"></td> 
                 </tr> 
                 @endforeach
                </tbody>
                </table><div class="form-group ">
                <button onclick="calc(); " type="submit">Submit</button>
                </div> 

Answer 1

从聊天讨论和您的控制器代码中发现，您想要添加带有一些公式的行并将结果保存在数据库中的 results 字段中。所以这里我们想出了代码

控制器保存方法

$scores = $request->input('scores');

foreach($scores as $row){ 
    $score = Score::find($row['id']); 
    $score->jan_ap = $row['jan_ap']; 
    $score->jan_hm = $row['jan_hm']; 
    $score->result = round($row['jan_ap'] * 0.5) + ($row['result'] * 0.5); 
    $score->save(); 
}

注意：从刀片模板中删除结果文本输入，因为它不再使用。

Answer 2

我会用我将做出的一些假设来回答这个问题，因为从问题中它并不是很清楚。

假设 1： 您使用从某处获取数据的刀片呈现此表：

<div id="myTabDiv">
<table name="mytab" id="mytab1">
<tr> 
  <td>col1 Val1 (has ID)</td>
  <td>col2 Val2 (has jan_ap)</td>
  <td>col3 Val3 (has jan_hm)</td>
  <td>col4 Val4 (has result)</td>
</tr>
<tr>
  <td>col1 Val1 (has ID)</td>
  <td>col2 Val2 (has jan_ap)</td>
  <td>col3 Val3 (has jan_hm)</td>
  <td>col4 Val4 (has result)</td>
</tr>

假设 2：你已经用值填充了 col 1-3，但是你有一个神奇的按钮，当点击它时会计算 col4。该按钮使用了JS函数。

function calc(){    
var table = document.getElementById("mytab1");
for (var i = 0, row; row = table.rows[i]; i++) {
  //iterate through rows
  //rows would be accessed using the "row" variable assigned in the for loop
 for (var j = 0, col; col = row.cells[j]; j++) {
   //iterate through columns
   //columns would be accessed using the "col" variable assigned in the for loop
   //here you can do things like saying sum col[1] + col[2] and then input result in col[3]
   }  
  }
}