Javascript 是否有一种方法可以为每行提供多个计算值？使用jquery

我是javascript/jquery的新手。我很难计算出每个问题每行的平均值。加上Q，E，T，然后除以3=平均值。我不知道如何解决这个问题，因为错误显示有3个元素的id不唯一

下面是我遇到的错误。

Q、E、T和A的HTML代码（平均值）

---

为HTML代码道歉。这是roosterjs网站的输出。提前谢谢

首先要解决的是HTML：不应该有具有相同ID的元素。在表中解决这个问题的一种方法是将行号添加到ID中（Q1、E1、T1、Q2、E2…），但在您的情况下有一个更好的解决方案：为它们分配类而不是ID（为了清晰起见，我省略了样式）：

现在编辑任何行，相应的结果将被更新

注:

• 看起来上一栏的额外选择是一个打字错误。我将其从示例中删除
• 我知道从html/css/js开始是很难的，因为所有的新信息，所以这里有一个小提示：我通常在html中放置短的内联样式，但是对于较大的或重复的样式（如此表），最好是添加到样式表中（页眉中的内联样式表就可以了）
• 另外，jQuery使很多工作变得更容易，但您应该知道jQuery所做的一切都可以用普通Javascript完成

---

以文本而不是图像形式提供html代码会很好。提供完整代码并运行iTunes更新帖子。。。道歉。

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

$("#Q, #E, #T").change(function(){
    $("#A").val((parseInt($("#Q").val()) + parseInt($("#E").val()) + parseInt($("#T").val())) / 3);
});

<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>
        </div>
    </td>

    <td style="..." rowspan="0">{!! $row->remarks !!}</td>
</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);
});