#收合

<c:forEach var="product_orderVO" items="${list}">
<div class="text-center">
<table>
  <tr>
    <th>訂單編號</th>
    <th>訂購日期</th>
    <th>總價</th>
    <th>訂單狀態</th>
    <th>運費</th>
    <th>收件人</th>
    <th>收件人電話</th>
    <th>收件地址</th>
  </tr>
  <tr>
     <td>${product_orderVO.pordno}</td>
     <td>${product_orderVO.porddate}</td>
     <td>${product_orderVO.pordtotal}</td>
     <td>${product_orderVO.pordsta}</td>
     <td>${product_orderVO.fare}</td>
     <td>${product_orderVO.recipient}</td>
     <td>${product_orderVO.phonenumber}</td>
     <td>${product_orderVO.pordadd}</td>
   </tr>
  </table>
  </div>
  <button id="${product_orderVO.pordno}btn">查看商品詳情</button>

 <div class="text-center">
 
<table style="display:none" id="${product_orderVO.pordno}">
  <tr>
    <th>商品名稱</th>
    <th>商品數量</th>
    <th>商品單價</th>
  </tr>
  <tr>
  <jsp:useBean id="product_order_listSvc" scope="page" class="com.product_order_list.model.Product_order_listService" /> 
  <c:forEach var="product_order_listVO" items="${product_order_listSvc.all}">
  	<c:if test="${product_orderVO.pordno==product_order_listVO.pordno}">
  	<jsp:useBean id="productSvc" scope="page" class="com.product.model.ProductService" /> 
  <c:forEach var="productVO" items="${productSvc.all}">
  	<c:if test="${product_order_listVO.prodno==productVO.prodno}">
	    <td>${productVO.prodname}</td>
	</c:if>
	</c:forEach>	
	    <td>${product_order_listVO.pord_listqty}</td>
	    <td>${product_order_listVO.pord_listprice}</td>
  </tr>
  </c:if>
  </c:forEach>
</table>
</div>

</c:forEach>



<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<c:forEach var="product_orderVO" items="${list}">
<script type="text/javascript">
  $(document).ready(function(){
    $("#${product_orderVO.pordno}btn").click(function(){
      $("#${product_orderVO.pordno}").slideToggle("fast");
    });
  });
</script>
</c:forEach>


<style>
  table{
    width: 80%;
    border-style: hidden;
    font-size: 20px;
    font-family: 微軟正黑體;
  }
  table th{
    background-color: #f8b300;
    /* border: 1px solid #f8b300; */
  }

  table td{
    background-color: #fff7e6;
    /* border: 1px solid #f8b300; */
       text-align: center;

  }

  .order_detail{
   text-align: right;
  }
</style> 






	</div>