【きっかけ】

過去の記事参照
 
buffalokusojima.hatenablog.com


1. 使用するサービス

HTML, Javascript, CSS

2. 概要
前回、バックエンドで注文詳細を取得したところまで説明しました。今回はフロントエンド側で注文詳細を表示する部分を説明します。
以前、フロントエンドで注文一覧を表示する機能を実装したので、それぞれの注文をクリックするとドロップダウン式で詳細が見れるようにします。

3. 実装

前回実装した関数makeOrderListの内部で呼び出しているopenOrderDetailについて説明します。前回の実装部分は以下のようになります。

function makeOrderList(data){
            
            data = JSON.parse(data);
            var targetDiv = document.getElementById("openOrderArea");
            if(targetDiv.firstElementChild){
                targetDiv.removeChild(targetDiv.childNodes[0]);
            }
            
            if(!data.data){
                var div = document.createElement('div');
                div.innerText="No Open Order";
                targetDiv.appendChild(div);
                return;
            }
            
            ...省略

                td.innerText=format_str;
                td.onclick=openOrderDetail; <=ここの部分
                if(d.child_order_id){
                    td.id = "child_id"+d.child_order_id;
                }else{
                    td.id = "parent_id"+d.parent_order_acceptance_id;
                }
                tr.appendChild(td); 

   ...省略

openOrderDetailの内容は以下になります。

function openOrderDetail(){
            console.log(this);
           
            var table = document.getElementById('orderListTable');
            var index=0;
            var id = this.id.split("_id")[1]
            
            // 注文リストに注文詳細を加える形で実現する。もう一度リストをクリックすると詳細が閉じる仕組み。
            for(var element of table.rows){
                index++;
                if(element.id == this.id){
                    if(table.rows[index] 
                        && table.rows[index].className == 'orderDetailRow'){
                        table.deleteRow(index);
                        return;
                    }
                    var row = table.insertRow(index);
                    row.className='orderDetailRow'; 

                    var cell = row.insertCell(0);
                    cell.colSpan="4";

                    if((data = child_order_map[id])){
                        makeCellContent(JSON.stringify({data: data}),cell)
                    }else{
                        getOrderDetail(cell, id);
                    }
                }
            }