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

【问题标题】：How to get child nodes in a <td> in javascript如何在javascript中的<td>中获取子节点
【发布时间】：2019-10-01 11:48:45
【问题描述】：

我正在尝试从表中获取子节点，将其相乘并在输入字段中显示。我试过使用 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”。例如。数量stdQty1=quantityP1，数量stdQty[2]=quantityP2，数量*stdQty[3]=quantityP3 等。为此，我需要<td> 中的特定元素。请帮忙！

【问题讨论】：

问题不完整？
如果你能分享jsFiddle左右，那将非常有帮助。
没有问题是完整的，我想使用javascript获取标签内的内容，就是这样。
@chirag 您的问题不清楚详细说明，但根据我的理解，我认为您正在尝试在输入字段更改时实现某些内容，它应该自动填充其他输入字段，为此您必须申请在您要提供数据的输入字段中的 onchange 函数。同时在 onchange 函数中更新另一个输入字段。
没有问题是完整的，我想使用javascript获取标签内的内容，就是这样。我首先需要标签内的内容

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

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;

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

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