开发者问题收集

如何在 javascript 中的 <td> 中获取子节点

2019-10-01
3094
javascript html html-table dom-selection

我尝试从表中获取子节点，将其相乘并将其显示在输入字段中。我尝试使用 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 模板中

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

2个回答

我用不同的方法做到了这一点： 我在表单上附加了不同的 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;
chirag
2019-10-02

由于您使用的是 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;
  }
Altair312
2019-10-01