如何使用 javascript for-loop 和 if-statement 在右表中显示数据？

Question

我有一些通过 ajax 获取的数据，我需要使用 for 循环和 if 语句来检查哪些商品属于哪个购物车。然后显示在他们的表中。 我编写的 for 循环和 if 语句在 HTML 中正常工作，现在我只是使用相同的逻辑在 js 文件中编写。但它失败了。我的代码总是将所有数据放在一个表中。 我错过了哪一部分？挠了半天头也解决不了。

test.js

function createTable() {
        $.ajax({
                url: "http://127.0.0.1:8000/test2",
                type: "GET",
                success: function (result) {
                    var mybody = document.getElementById("myDynamicTable");
                    var customer_status = (result);
                    var customers = JSON.parse(customer_status.Customer);
                    var carts = JSON.parse(customer_status.Cart);
                    var goods = JSON.parse(customer_status.Good);
                    for (var p in customers){
                        for (var c in carts){
                            if(customers[p].pk == carts[c].fields.customer){
                                for (var g in goods){
                                    if (carts[c].pk == goods[g].fields.cart){
                                        var tr2 = document.createElement('TR');
                                        tr2.className="trClass";
                                        var td1 = document.createElement('TD');
                                        var td2 = document.createElement('TD');
                                        var td3 = document.createElement('TD');
                                        var td4 = document.createElement('TD');
                                        td1.appendChild(document.createTextNode(goods[g].fields.name));
                                        td2.appendChild(document.createTextNode(goods[g].fields.count));
                                        td3.appendChild(document.createTextNode(goods[g].fields.price));
                                        td4.appendChild(document.createTextNode(goods[g].fields.count*goods[g].fields.price));
                                        tr2.appendChild(td1);
                                        tr2.appendChild(td2);
                                        tr2.appendChild(td3);
                                        tr2.appendChild(td4);
                                        mybody.appendChild(tr2);
                                    }
                                }
                            }
                        }
                    }
                }
            })
            $(".trClass").remove();
}

例如， 我使用管理站点向第二个客户添加了两杯可乐，但它仍然显示在第一个客户的下方。

请帮忙！谢谢。

更新： 在我的 html 中，已经有一个循环来创建列。

test.html

<div class="container custom-container-width" style="text-align=center;">
    <div class="grid-container" id="grid-container1">
        {% for customer in Customer %}
        <div class="gap-buffer " style="border:white;height:500px;">
            <div class="profilesize">
                <img src="{{ MEDIA_URL }}/{{customer.uuid}}/{{customer.uuid}}.jpeg" width=192 height=108>
            </div>
            <br>
            <div class="container ">
                <div class="table-responsive " >
                    <div class="table-shape ">
                        <table class = "table-shape">
                            <thead class="thead-dark">
                                <tr>
                                    <th>Product</th>
                                    <th>Count</th>
                                    <th>Price</th>
                                    <th>Subtotal</th>
                                </tr>
                            </thead>
                            <tbody id="myDynamicTable" class="table-shape">
                            </tbody>
                        </table>
                    </div>
                    <br>
                    <P><strong>Total:</strong></P>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

Answer 1

您在循环中使用相同的 id 属性值：这会产生无效的 HTML：id 应该是唯一的。所以只需删除 id 属性。请改用 class 属性中的特定类。改变这个：

<tbody id="myDynamicTable" class="table-shape">

到这里：

<tbody class="myDynamicTable table-shape">

在你的 JavaScript 中，改变这个：

var mybody = document.getElementById("myDynamicTable");
var customer_status = (result);
var customers = JSON.parse(customer_status.Customer);
var carts = JSON.parse(customer_status.Cart);
var goods = JSON.parse(customer_status.Good);
for (var p in customers){
    for (var c in carts){

到这里：

var mytables = Array.from(document.querySelectorAll(".myDynamicTable")); // <---
var customer_status = (result);
var customers = JSON.parse(customer_status.Customer);
var carts = JSON.parse(customer_status.Cart);
var goods = JSON.parse(customer_status.Good);
for (var p in customers){
    var mybody = mytables.shift(); // <---
    for (var c in carts){