Как получить дочерние узлы в <td>в JavaScript

Question

Я пытаюсь получить дочерние узлы из таблицы, умножить это и показать это в поле ввода. Я пытался использовать textContext, но он возвращает только первое значение, а не последующие.

Мой код Javascript:

function add() {
  console.log("this is working")
  var x = parseInt(document.getElementById("id_quantity").value);
  console.log(x, "value of x");
  var y = document.getElementById("quantity").textContent;
  document.getElementById("id_quantity_p1").value = x * y;

Это моя разметка HTML:

<div class="col-md-6 col-sm-8 col-12">
    <form method="post" id="MaterialRequestForm" data-kit-url="{% url 'employee:ajax_load_kit' %}"  onkeyup="add()"
                  data-product-url="{% url 'employee:ajax_load_product' %}"
                  novalidate>
                {% csrf_token %}
                {{ form|crispy }}


                <button type="submit">Save</button>
                <div id="products-table" class="col-md-12 col-sm-8 col-12 product-table-ajax">

                </div>
            </form>
        </div>

И это HTML-код моей таблицы:

{% for product in products %}
    <tr>
        <td>{{ product.id }}</td>
        <td>{{ product.product_name }}</td>
        {% for i in quantities %}
            {% if forloop.counter == forloop.parentloop.counter %}
                <td id="quantity">{{ i }}</td>
            {% endif %}
        {% endfor %}

    {% endfor %}

В этом <td id-"quantity" возвращает несколько значений, и я хочу первые два из них.

Они находятся в HTML-шаблоне django

В этом я хочу ввести количество, и я хочу, чтобы оно было умножено на содержание Std Qty в столбце и заполнялось в «количество p1», «количество p2», «количество p3». например. количество stdQty 1 = количество P1, количество stdQty [2] = количество P2, количество * stdQty [3] = количество P3 и т. д. Для этого мне нужны определенные элементы в моем <td>. Пожалуйста, помогите!

Answer 1

Я сделал это другим способом: я прикрепил разные идентификаторы к форме, а затем вместо того, чтобы выбрать дочерний элемент, назначил разные идентификаторы всем и затем использовал getElementByID:

{% for product in products %}
<tr>
        <td>{{ product.id }}</td>
        <td>{{ product.product_name }}</td>
        {% for i in quantities %}
            {% if forloop.counter == forloop.parentloop.counter %}
                <td id="q{{ forloop.counter }}">{{ i }}</td>
            {% endif %}
        {% endfor %}

    {% endfor %}

    </tr>

И затем изменил свойJS соответственно:

  function add() {
  console.log("this is working")
  var x = parseInt(document.getElementById("id_quantity").value);
  console.log(x, "value of x");
  var y =document.getElementById("q1").textContent;
  var y1 =document.getElementById("q2").textContent;
  var y2 =document.getElementById("q3").textContent;
  var y3 =document.getElementById("q4").textContent;
  var y4 =document.getElementById("q5").textContent;
  document.getElementById("id_quantity_p1").value = x * y;
  document.getElementById("id_quantity_p2").value = x * y1;
  document.getElementById("id_quantity_p3").value = x * y2;
  document.getElementById("id_quantity_p4").value = x * y3;
  document.getElementById("id_quantity_p5").value = x * y4;

Answer 2

Очевидно, он вернет вам только первый из-за того, что вы используете функцию body.getElementById, которая возвращает только самый первый элемент с указанным идентификатором, который вы ищете.

Для получениявсе значения, которые вам нужны, я предлагаю вместо этого вместо этого переделать "id_quantity" в класс.

После этого используйте вместо этого body.getElementsByClassName, напишите цикл, в котором хранятся данные из каждого узла id_quantity. "и зациклите его на полях, где вы их умножаете.

Вот очень быстрый пример того, что я имею в виду

HTML:

<div id="container">
    <div id="color-div">
      <table>
        <thead>
          <th>1</th>
          <th>2</th>
        </thead>
        <tbody>
          <tr>
            <td class="input">5</td>
            <td class="output"></td>
          </tr>

          <tr>
            <td class="input">7</td>
            <td class="output"></td>
          </tr>

          <tr>
            <td class="input">10</td>
            <td class="output"></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

Javasript:

  let arr = [];

  const $input = document.getElementsByClassName("input");
  const $output = document.getElementsByClassName("output");

  for (let i = 0; i < $input.length; i += 1) {
    arr.push($input[i].innerHTML);
  }

  for (let i = 0; i < $output.length; i += 1) {
    $output[i].innerHTML = arr[i] * 5;
  }