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

Posted 2023-02-24

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

【英文标题】：How can I display the data in the right table by using javascript for-loop and if-satement?

【发布时间】：2020-06-13 06:02:41

【问题描述】：

我有一些通过 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>

【问题讨论】：

那里没有任何代码可以将内容放在单独的表中。您只使用一张桌子，mybody。您的代码中没有其他表的痕迹。

嗨，对不起，我也应该放上我的 html 代码。在我的 html 中，有一个用于创建容器列的 for 循环。所以应该有很多表。我说的对吗？

HTML 不是一种编程语言：它没有循环。您可能参考了% % 标记，它们不是 HTML。请使用您用于该（模板）系统的系统标记您的问题

在重复生成表格的 HTML 时，不应使用 id=myDynamicTable，因为 id 在有效的 HTML 中必须是唯一的。

【参考方案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)

【讨论】：

非常感谢！有用！！！下次我会小心地发布一个问题。真的谢谢你！