0

我正在尝试从表中获取子节点，将其相乘并在输入字段中显示。我试过使用 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"返回多个值，我想要前两个。

它们在 django HTML 模板中

在此我想输入数量，我希望它应该乘以列中的内容标准数量并填写“数量 p1”、“数量 p2”、“数量 p3”。例如。数量stdQty 1 =quantityP1，数量stdQty[2]=quantityP2，数量*stdQty[3]=quantityP3 等。为此，我需要在我的<td>. 请帮忙！

4

2 回答 2

1

我用不同的方式做到了这一点：我在表单中附加了不同的 ID，然后我没有获取子 ID，而是为所有的 ID 分配了不同的 ID，然后使用了 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;
于 2019-10-02T06:54:17.710 回答
0

由于您使用的是 body.getElementById 函数，它显然只会返回第一个元素，该函数仅返回具有您要查找的 id 的第一个元素。

为了获得您需要的所有值，我建议您可以改为将“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;
  }
于 2019-10-01T13:21:44.290 回答