我对JavaScript/jQuery非常陌生。 我很难计算出每个问题的每行平均数。 将Q，E，T相加，然后除以3=平均值。 我不知道如何解决这个问题，因为错误说有3个元素的id不唯一
下面是我遇到的错误。 遇到错误
Q，E，T和A的HTML代码（平均）
<tbody>
<tr>
<td style="text-align: left; width: 316px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);" rowspan="0">{!! $row->function_name !!}</td>
<td style="text-align: left; width: 316px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);" rowspan="0">{!! $row->mfo_desc !!}</td>
<td style="text-align: left; width: 341px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);" rowspan="0">{!! $row->success_indicator_desc !!}</td>
<td style="text-align: left; width: 437px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);" rowspan="0">{!! $row->actual_accomplishment_desc !!}</td>
</tr>
<tr style="background-color: rgb(255, 255, 255);">
<td rowspan="0" style="text-align: center; border-top: 1pt solid rgb(171, 171, 171); border-right: 1pt solid rgb(171, 171, 171); border-bottom: 1pt solid rgb(171, 171, 171); border-image: initial; border-left: none; background: white; padding: 0.6pt;">
<div class="form-label-group">
<select name="Q" class="form-control form-control-sm" id="Q" style="width: 50px">
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>
</div>
</td>
<td rowspan="0" style="text-align: center; border-top: 1pt solid rgb(171, 171, 171); border-right: 1pt solid rgb(171, 171, 171); border-bottom: 1pt solid rgb(171, 171, 171); border-image: initial; border-left: none; background: white; padding: 0.6pt;">
<div class="form-label-group">
<select name="E" class="form-control form-control-sm" id="E" style="width: 50px">
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>
</div>
</td>
<td rowspan="0" style="text-align: center; border-top: 1pt solid rgb(171, 171, 171); border-right: 1pt solid rgb(171, 171, 171); border-bottom: 1pt solid rgb(171, 171, 171); border-image: initial; border-left: none; background: white; padding: 0.6pt;">
<div class="form-label-group">
<select name="T" class="form-control form-control-sm" id="T" style="width: 50px">
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>
</div>
</td>
<td rowspan="0" style="text-align: center; border-top: 1pt solid rgb(171, 171, 171); border-right: 1pt solid rgb(171, 171, 171); border-bottom: 1pt solid rgb(171, 171, 171); border-image: initial; border-left: none; background: white; padding: 0.6pt;">
<div class="form-label-group">
<input type="text" class="form-control form-control-sm" name="A" id="A" style="width: 50px" readonly>
<select name="A" class="form-control form-control-sm" value="A" id="A" style="width: 50px" readonly>
</div>
</td>
<td style="text-align: center; width: 316px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);" rowspan="0">{!! $row->remarks !!}</td>
</tr>
</tbody>
标记用@foreach循环括起来
下面是计算平均值的jquery代码。
$("#Q, #E, #T").change(function(){
$("#A").val((parseInt($("#Q").val()) + parseInt($("#E").val()) + parseInt($("#T").val())) / 3);
});
对于HTML代码表示歉意。 它是roosterjs网站的输出。 提前谢谢！
首先要修复的是HTML:不应该有具有相同ID的元素。 在表中解决这个问题的一种方法是将行号添加到IDs中(Q1，E1，T1，Q2，E2...)，但在您的情况下有一个更好的解决方案:为它们分配类而不是ID（为了清楚起见，我省略了样式）:
<tr style="...">
<td rowspan="0" style="...">
<div class="form-label-group">
<select name="Q" class="form-control form-control-sm q-value" style="...">
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>
</div>
</td>
<td rowspan="0" style="...">
<div class="form-label-group">
<select name="E" class="form-control form-control-sm e-value" style="...">
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>
</div>
</td>
<td rowspan="0" style="...">
<div class="form-label-group">
<select name="T" class="form-control form-control-sm t-value" style="...">
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>
</div>
</td>
<td rowspan="0" style="...">
<div class="form-label-group">
<input type="text" class="form-control form-control-sm a-value" name="A" style="..." readonly>
<select name="A" class="form-control form-control-sm a-value" value="A" style="..." readonly>
</div>
</td>
<td style="..." rowspan="0">{!! $row->remarks !!}</td>
</tr>
然后，您的javascript针对三个类:当更改事件触发时，您必须找出输入或选择框指向哪一行($(this).closex('tr'))，然后在所述行中找到第四个输入/选择:
$(".q-value, .e-value, .t-value").change(function(){
let currentRow = $(this).closest('tr');
let EValue = parseInt(currentRow.find('.e-value').val());
let QValue = parseInt(currentRow.find('.q-value').val());
let TValue = parseInt(currentRow.find('.t-value').val());
currentRow.find('a-value').val((EValue + QValue + TValue ) / 3);
});
现在编辑任何行，相应的结果将被更新。
