Есть ли способ предоставить несколько вычисленных значений для каждой строки? используя jquery

Question

Я новичок в javascript / jquery. Мне сложно вычислить среднее значение каждого вопроса по строке. сложив Q, E, T, затем разделите на 3 = среднее значение. Я не знаю, как решить эту проблему, поскольку в ошибке говорится, что есть 3 элемента с неуникальным идентификатором

ниже - это ошибка, с которой я столкнулся. Обнаружена ошибка

HTML Код для Q, E, T и A (средний)

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

и вот мой код jquery для вычисления среднего.

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

Приносим извинения за код HTML. Это вывод с сайта rooster js. Заранее спасибо!

Answer 1

Первое, что нужно исправить, это HTML: не должно быть элемента с таким же идентификатором. Один из способов решить эту проблему в таблице - добавить номер строки к идентификаторам (Q1, E1, T1, Q2, E2 ...), но в вашем случае есть лучшее решение: назначить им классы вместо идентификаторов ( Я опустил стили для ясности):

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

Тогда ваш javascript предназначен для трех классов: при срабатывании события изменения вы должны выяснить, в какой строке находится поле ввода или выбора ( $(this).closest('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);
});

Теперь отредактируйте любую строку, и соответствующий результат будет обновлен.

Примечания:

• Похоже, выбор дополнительных услуг в последнем столбце был опечаткой. Я удалил его из примера.
• Я знаю, что начинать с html / css / js сложно, потому что вся новая информация, поэтому вот небольшой совет: я обычно помещаю короткие встроенные стили в HTML , но для более крупных или повторяющихся стилей (таких как эта таблица) лучше добавить их в таблицу стилей (подойдет встроенная таблица стилей в заголовке страницы).
• Кроме того, jQuery сделать много работать проще, но вы должны знать, что все, что делает jQuery, можно сделать с vanilla Javascript.