Как автоматизировать заполнение таблицы при помощи js?

Question

[s_stepashka]

Django выводит вот такую динамически изменяемую таблицу:

<table class='sortable'>
    <tr><th style="display:none">Id</th>
        <th>Номер заявки</th>
        <th>Наименование детали</th>
        <th>Ед.изм.</th>
        <th>Количество</th>
        <th>Количество получено</th>
        <th>Количество1</th>
        <th>ТТН1</th>
        <th>Дата1</th>
        <th>Н/Н1</th>
        <th>Цена1</th>
        <th>Количество2</th>
        <th>ТТН2</th>
        <th>Дата2</th>
        <th>Н/Н2</th>
        <th>Цена2</th>
        <th>Количество3</th>
        <th>ТТН3</th>
        <th>Дата3</th>
        <th>Н/Н3</th>
        <th>Цена3</th>
    </tr>
    {% for complect in full_compl_table %}
    <tr>
        <td style="display:none">{{ complect.id }}</td>
        <td><input type="text" name="zayavka_number-{{ forloop.counter }}" required="" id="{{ forloop.counter }}-1" onchange="complectChange(id, name, {{ complect.id }})" value="{{ complect.zayavka_number }}"><p style="display:none">{{ complect.zayavka_number }}</p></td>
        <td><input type="text" name="name_of_detail-{{ forloop.counter }}" required="" id="{{ forloop.counter }}-2" onchange="complectChange(id, name, {{ complect.id }})" value="{{ complect.name_of_detail }}"><p style="display:none">{{ complect.name_of_detail }}</p></td>
        <td><input type="text" name="ed_izm{{ forloop.counter }}" required="" id="{{ forloop.counter }}-3" onchange="complectChange(id, name, {{ complect.id }})" value="{{ complect.ed_izm }}"></td>
        <td><input type="text" name="kolichestvo{{ forloop.counter }}" required="" id="{{ forloop.counter }}-4" onchange="complectChange(id, name, {{ complect.id }})" value="{{ complect.kolichestvo }}"></td>
        <td><input type="text" name="itog" required="" id="itog_id" class="itogov" value="СУММА kol1 + kol2 + kol3"></td>
        <td><input type="text" name="kol_1-{{ forloop.counter }}" required="" class="kol1" id="{{ forloop.counter }}-5" onchange="complectChange(id, name, {{ complect.id }})" value="{{ complect.kol_1 }}"><p style="display:none">{{ complect.kol1 }}</p></td>
        <td><input type="text" name="ttn_1-{{ forloop.counter }}" required="" id="{{ forloop.counter }}-6" onchange="complectChange(id, name, {{ complect.id }})" value="{{ complect.ttn_1 }}"></td>
        <td><input type="text" name="date_1-{{ forloop.counter }}" required="" id="{{ forloop.counter }}-7" onchange="complectChange(id, name, {{ complect.id }})" value="{{ complect.date_1 }}"></td>
        <td><input type="text" name="nom_number_1-{{ forloop.counter }}" required="" id="{{ forloop.counter }}-8" onchange="complectChange(id, name, {{ complect.id }})" value="{{ complect.nom_number_1 }}"></td>
        <td><input type="text" name="price_1-{{ forloop.counter }}" required="" id="{{ forloop.counter }}-9" onchange="complectChange(id, name, {{ complect.id }})" value="{{ complect.price_1 }}"></td>
        <td><input type="text" name="kol_2-{{ forloop.counter }}" required="" class="kol2" id="{{ forloop.counter }}-10" onchange="complectChange(id, name, {{ complect.id }})" value="{{ complect.kol_2 }}"><p style="display:none">{{ complect.kol2 }}</p></td>
        <td><input type="text" name="ttn_2-{{ forloop.counter }}" required="" id="{{ forloop.counter }}-11" onchange="complectChange(id, name, {{ complect.id }})" value="{{ complect.ttn_2 }}"></td>
        <td><input type="text" name="date_2-{{ forloop.counter }}" required="" id="{{ forloop.counter }}-12" onchange="complectChange(id, name, {{ complect.id }})" value="{{ complect.date_2 }}"></td>
        <td><input type="text" name="nom_number_2-{{ forloop.counter }}" required="" id="{{ forloop.counter }}-13" onchange="complectChange(id, name, {{ complect.id }})" value="{{ complect.nom_number_2 }}"></td>
        <td><input type="text" name="price_2-{{ forloop.counter }}" required="" id="{{ forloop.counter }}-14" onchange="complectChange(id, name, {{ complect.id }})" value="{{ complect.price_2 }}"></td>
        <td><input type="text" name="kol_3-{{ forloop.counter }}" required="" class="kol3" id="{{ forloop.counter }}-15" onchange="complectChange(id, name, {{ complect.id }})" value="{{ complect.kol_3 }}"><p style="display:none">{{ complect.kol3 }}</p></td>
        <td><input type="text" name="ttn_3-{{ forloop.counter }}" required="" id="{{ forloop.counter }}-16" onchange="complectChange(id, name, {{ complect.id }})" value="{{ complect.ttn_3 }}"></td>
        <td><input type="text" name="date_3-{{ forloop.counter }}" required="" id="{{ forloop.counter }}-17" onchange="complectChange(id, name, {{ complect.id }})" value="{{ complect.date_3 }}"></td>
        <td><input type="text" name="nom_number_3-{{ forloop.counter }}" required="" id="{{ forloop.counter }}-18" onchange="complectChange(id, name, {{ complect.id }})" value="{{ complect.nom_number_3 }}"></td>
        <td><input type="text" name="price_3-{{ forloop.counter }}" required="" id="{{ forloop.counter }}-19" onchange="complectChange(id, name, {{ complect.id }})" value="{{ complect.price_3 }}"></td>
        <script> function complectChange(id, name, lineid) {
            var x = document.getElementById(id).value;
            $.ajax({
                        url: "/change_complect_table",
                        type: "POST",
                        dataType: "json",
                        data: {
                            changevar: x,
                            chengecolumn: name,
                            idchange: lineid,
                            csrfmiddlewaretoken: '{{ csrf_token }}'
                            },
                    });
        }</script>

Хочу сделать так, чтобы при загрузке страницы в столбце "Количество получено" автоматически подсчитывались значения суммы ячеек соответственно "Количество1", "Количество2","Количество3".
Уже пробовал делать в javascript через document.getElementsByClassName, но ничего не получилось. Если бы javascript подружить с пониманием {{ }} - тогда понятно было бы, а так не понятно. Заранее спасибо

Comments

[astrot]

Как вариант - двумя циклами, сначала перебирай tr а в них td. Ну или на jquery tr

[Mat1lda]

как вариант (или пилить сложение в шаблоне, что тупо)
https://riptutorial.com/ru/django/example/6254/выч...

Answer 1

[Андрей Пике]

Подружить jQuery с шаблонизатором Django и его `{{ }}` так не получится.

<td>
  <input type="text" name="itog" required="" id="itog_id" class="itogov" value="СУММА kol1 + kol2 + kol3">
</td>

=> (персонифицируем name)

<td>
  <input ... name="itog-{{ forloop.counter }}" ...  value="СУММА kol1 + kol2 + kol3">
</td>

<tr>
=> (персонифицируем строку таблицы)
<tr id="tr-{{ forloop.counter }}">

$('[id^="tr-"]').each(() => { // проходимся по строкам
  let id = this.attr('id').substr(3);  // вытаскиваем индекс

  let sum = $(`name_of_detail-${id}`),val() + $(`ed_izm${id}`),val() + $(`kolichestvo${id}`),val(); // суммируем

  $(`[name="itog-${id}"`).val(sum); // засовываем в itog
})

Писал вслепую, мог опечататься.
Суть, думаю, понятна.

Comments

[s_stepashka]

Спасибо, за развернутый ответ. Обязательно так буду пробовать.

[Андрей Пике]

,val()

это

.val()

конечно. С ноута писал, не видно было.

[Андрей Пике]

И советую писать по-английски, а не транслитом. На будущее поможет. Любой программер по-аглицки должен понимать в наше время. IMHO

[s_stepashka]

Я мастер по монтажу трубопроводов и технологического оборудования =)) это просто хобби и интерес. Спасибо большое за советы, учту.

[Андрей Пике]

Молодец, что полез.
Рад, что тебе интересно!