Как я могу отобразить данные в правой таблице, используя javascript for-l oop и if-satement? - PullRequest
Новая
       7

Как я могу отобразить данные в правой таблице, используя javascript for-l oop и if-satement?

0 голосов
/ 29 февраля 2020

У меня есть некоторые данные, извлекаемые к ajax, мне нужно использовать for-l oop и оператор if, чтобы проверить, какой товар принадлежит чьей корзине. А затем отобразить в своей таблице. Операторы for-l oop и if, которые я пишу, корректно работали в HTML, теперь я просто использую те же логи c для записи в 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();
}

например, я использую админ-сайт для добавления два кока-кола второму клиенту, но он все еще отображается под первым клиентом.

pic1

, пожалуйста, помогите! спасибо.

Обновление: в моем html, уже есть все oop для создания столбцов.

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>

1 Ответ

1 голос
/ 29 февраля 2020

Вы используете то же значение атрибута id в al oop: это приводит к неверному HTML: идентификатор должен быть уникальным. Так что просто отбросьте этот атрибут id. Вместо этого используйте указанный класс c в атрибуте 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){
...