Question

在电子商务网站的php页面上，我必须显示客户下的订单。我想创建一个包含订单列表的表，对于每一行，我希望有一个按钮可以使订单明细显示/消失（在该行下方）。您感兴趣的PHP页面代码部分是这样的：

 <div class="row">
                <div class="col-md-10 offset-1 corpoareaclienti" id="corpoareaclienti">
                </div>

它只是一个空的div，当在同一页面上按下“ mostra acquisti”按钮时，将由javascript函数填充。

var mostraacquisti = document.getElementById("mostraacquisti"); 
mostraacquisti.onclick = getOrders;

“ GetOrders”向ordini.php页面发出ajax请求，该页面生成带有订单数据的xml文件。然后调用showOrders函数，该函数用于在php页面上打印表格。

function getOrders() {
        new Ajax.Request("ordini.php",
                { method: "GET",
                    onSuccess: showOrders,
                    onFailure: ajaxFailed,
                    onException: ajaxFailed });   }

function showOrders(ajax) {
//Crea la tabella degli ordini effettuati
        $("#corpoareaclienti").html("<h3 class='text-center'> Elenco degli ordini effettuati</h3>");
        var ordini = ajax.responseXML.getElementsByTagName("ordine");
        if (ordini.length > 0) {
            $("#corpoareaclienti").append("<table class='table text-center' id='ordini'> <thead id='intestazione'><tr id='riga'><th scope='col'>Numero ordine</th><th scope='col'>Data ordine</th><th scope='col'>Prezzo Totale</th><th scope='col'>Dettagli</th></tr></thead><tbody id='tbody'>");
            for (var i = 0; i < ordini.length; i++) {
                var idordine = ordini[i].getAttribute("idordine");
                var data = ordini[i].getElementsByTagName("data")[0].firstChild.nodeValue;
                var prezzoTotale = ordini[i].getElementsByTagName("prezzoTotale")[0].firstChild.nodeValue;
                $("#tbody").append("<tr id='riga" + i + "'><th scope='row'>" + idordine + "</th><td>" + data + "</td><td>" + prezzoTotale + "€</td><td> <button class='togglebutton' id='button_" + i + "'>Dettagli</button></td>");
                dettagliordine(idordine);   /* this is the problem ! */
                $("#tbody").append("</tbody></table>");
            }
        } else {
            $("#corpoareaclienti").html("<h3 class='text-center'>Non sono presenti ordini </h3><hr class='dividing_element'>");
        }

        $("button.togglebutton").click(function () {
            $(this).closest("tr").next().toggle("slow");
        });
    }

问题在于，将打印订单的所有行，然后才打印所有包含明细的行。然后我得到打印：

Ordine 1 
Ordine 2 
Ordine 3
dettagliOrdine 1
dettagliOrdine 2 
dettagliOrdine 3

不是

Ordine1
dettagliOrdine 1
Ordine 2 
dettagliOrdine 2 
Ordine 3
dettagliOrdine 3

如我所愿。

“ dettagliordine（idordine）”函数只是对另一个文件的另一个ajax请求（ordine.php），该文件生成带有订单详细信息的xml。然后。

<ordine idordine="80027">
<prodotto codiceprodotto="1">
<nome> NomeOrologio1</nome>
<descrizione> Descrizione orologio 1</descrizione>
<prezzo> 34</prezzo>
<immagine> or1.jpg</immagine>
<categoria> orologeria</categoria>
</prodotto>
<prodotto codiceprodotto="5">
<nome> Nomeorologio5</nome>
<descrizione> Descrizione 5 orologio</descrizione>
<prezzo> 12</prezzo>
<immagine> or2.jpg</immagine>
<categoria> orologeria</categoria>
</prodotto>
</ordine>

尤其是

function dettagliordine(idordine) {
new Ajax.Request("ordine.php",
                {  method: "GET",
                    parameters: {idordine: idordine},
                    onSuccess: stampadettagli,
                    onFailure: ajaxFailed,
                    onException: ajaxFailed}); }

    function stampadettagli(ajax) {
        var prodotti = ajax.responseXML.getElementsByTagName("prodotto");
        if (prodotti.length > 0)
        {
            $("#tbody").append("<tr id='orderdetail' style='display:none;'><td colspan=4><h1>Dettagli dell'ordine</h1><hr/>");
            for (var j = 0; j < prodotti.length; j++) {
                var codiceprodotto = prodotti[j].getAttribute("codiceprodotto");
                var nome = prodotti[j].getElementsByTagName("nome")[0].firstChild.nodeValue;
                var descrizione = prodotti[j].getAttribute("descrizione");
                var prezzo = prodotti[j].getAttribute("prezzo");
                var immagine = prodotti[j].getAttribute("immagine");
                var categoria = prodotti[j].getAttribute("categoria");
                $("#orderdetail").append("<p>codice : " + codiceprodotto + " Nome: " + nome + "g:"+j+"  </p> ");
            }
            $("#tbody").append("</td></tr>");}}
    function showDettagliAccount(ajax) {
$("#corpoareaclienti").html("");
        var cliente = ajax.responseXML.getElementsByTagName("cliente");
        for (var i = 0; i < cliente.length; i++) {
            var nome = (cliente[i].getElementsByTagName("nome")[0]).firstChild.nodeValue;
            var cognome = (cliente[i].getElementsByTagName("cognome")[0]).firstChild.nodeValue;
            var mail = (cliente[i].getElementsByTagName("mail")[0]).firstChild.nodeValue;
            $("#corpoareaclienti").html("<h3 class='text-center'> Dettagli account</h3><hr class='dividing_element'>");
            $("#corpoareaclienti").append("<h4> Cliente : </h4><p>" + nome + " " + cognome + "</p><h5> Mail  : </h5><p>" + mail + "</p>");
            $("#corpoareaclienti").append("<button id='eliminautente' class='btn btn-outline-danger' value='" + mail + "'>Elimina account</button>");
            var deleteButton = $("#eliminautente");
            deleteButton.onclick = eliminaUtente; }}

带有JavaScript的表格。详细信息行（隐藏/显示）

0 个答案: