Ordered Items Table: Demo
Ordered Items Table: Demo
Output:
Order-Items
| Srl. No. | Table No. | Customer Name | |||
|---|---|---|---|---|---|
| Date-Time | Mobile No. |
| Sl. No. | Items | Rate | - | Quantity | + | Remove | Amount Rs. |
|---|---|---|---|---|---|---|---|
| Total Amount Rs.: | 0.00 | ||||||
Code:
CSS:
HTML:
<div id="customerInfoBox" style="
border: 1px solid #ccc;
border-radius: 13px;
padding: 10px;
width: 700px;
margin: 0 auto;
margin-top: 50px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
">
<!-- 🔷 Top Row: Cancel, Heading, Status -->
<div style="display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #ccc;
border-radius: 10px 10px 0 0;
padding: 10px 20px;
background-color: #f9f9f9;
gap: 20px;">
<!-- ❌ Cancel Button -->
<div>
<button onclick="location.reload()" style="
padding: 10px 20px;
background-color: #e74c3c;
color: white;
border: none;
border-radius: 6px;
font-size: 18px;
cursor: pointer;
font-weight: bold;
"
onmouseover="this.style.backgroundColor='#c0392b'"
onmouseout="this.style.backgroundColor='#e74c3c'">
X Cancel Order
</button>
</div>
<!-- 📝 Heading -->
<div style="flex: 1; text-align: center;">
<h2 style="margin: 0;">Order-Items</h2>
</div>
<!-- ✅ Order Status Button -->
<div>
<button onclick="openPaymentModal()" style="
padding: 10px 20px;
background-color: #53c687;
color: white;
border: none;
border-radius: 6px;
font-size: 18px;
font-weight: bold;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
cursor: pointer;
transition: background-color 0.3s ease;
"
onmouseover="this.style.backgroundColor='#339961'"
onmouseout="this.style.backgroundColor='#53c687'">
Order Status
</button>
</div>
</div>
<!-- 🔷 Customer Info -->
<table style="width:100%; border-collapse:collapse;margin-bottom: 20px; background-color: whitesmoke; width: 100%; box-sizing: border-box">
<tr style="background-color: ; color: black;">
<th style="padding:3px; border:1px solid #ccc;background-color:#53c687; color: white; width: 13%; font-weight: bold; ">Srl. No.</th>
<td id="srlNoCell" style="padding:3px; border:1px solid #ccc; width: 10%;"></td>
<th style="padding:3px; border:1px solid #ccc; background-color:#53c687; color: white; width: 12%; font-weight: bold;">Table No.</th>
<td id="tableNoCell" style="padding:3px; border:1px solid #ccc; width: 15%;"></td>
<th style="padding:3px; border:1px solid #ccc;background-color:#53c687; color: white; width: 20%;">Customer Name</th>
<td id="customerNameCell" style="padding:3px; border:1px solid #ccc; width: 29%;"></td>
</tr>
<tr>
<th style="padding:3px; border:1px solid #ccc; background-color:#53c687; color: white; width: 13%;">Date-Time</th>
<td id="dateTimeCell" style="padding:3px; border:1px solid #ccc; width: 10%;"></td>
<th style="padding:3px; border:1px solid #ccc; background-color:#53c687; color: white; width: 12%;">Mobile No.</th>
<td id="mobileNoCell" style="padding:3px; border:1px solid #ccc; width: 15%;"></td>
<th style="padding:3px; border:1px solid #ccc; background-color:#53c687; color: white; width: 20%;">Email</th>
<td id="emailCell" style="padding:3px; border:1px solid #ccc;width: 29%;"></td>
</tr>
</table>
<!--🔷 Item Info-->
<!--Rows injected by JS--><table id="selectedItemsTable" style="border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-collapse: collapse; width: 100%;">
<thead>
<tr style="background-color: #53c687; color: white;">
<th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 6%;">Sl. No.</th>
<th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 46%;">Items</th>
<th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 8%;">Rate</th>
<th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 5%;">-</th>
<th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 10%;">Quantity</th>
<th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 5%;">+</th>
<th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 10%;">Remove</th>
<th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 10%;">Amount Rs.</th>
</tr>
</thead>
<tbody id="selectedItemsBody">
<!-- Rows injected by JS -->
</tbody>
<tfoot>
<tr>
<td colspan="7" style="text-align:right; font-weight:bold; padding:10px 6px; border:1px solid #ccc; border-radius: bottom-left 10px; border-radius: bottom-right 10px;">Total Amount Rs.:</td>
<td id="totalAmount" style="padding:10px 6px; font-weight:bold; border:1px solid #ccc;">0.00</td>
</tr>
</tfoot>
</table>
<!-- 🔹 Buttons Section -->
<div style="
width: 100%;
background: #f9f9f9;
padding: 15px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border: 1px solid #aaa;
border-top: none;
margin-top: -1px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
gap: 10px;
">
<button onclick="submitOrder()" style="
padding: 10px 25px;
background-color: #1e90ff;
color: white;
border: none;
border-radius: 6px;
font-size: 25px;
cursor: pointer;
" onmouseover="this.style.backgroundColor='#0073e6'" onmouseout="this.style.backgroundColor='#1e90ff'">Submit</button>
<!-- ❌➡️ ✅ Withdraw Cancel Button -->
<button onclick="location.reload()" style="
padding: 10px 20px;
background-color: whitesmoke;
color: green;
border: 2px solid green;
border-radius: 6px;
cursor: pointer;
font-size: 25px;
font-weight: bold;
"
onmouseover="this.style.backgroundColor='#339961'"
onmouseout="this.style.backgroundColor='#e74c3c'">
X Cancel Withdraw ✅
</button>
<button onclick="cancelAnimationFrame()" style="
padding: 10px 25px;
background-color: #ff7d66;
color: white;
border: none;
border-radius: 6px;
font-size: 25px;
cursor: pointer;
" onmouseover="this.style.backgroundColor='#ff5233'" onmouseout="this.style.backgroundColor='#ff7d66'">Close</button>
</div>
</div>
Comments
Post a Comment