酒店后台管理系统中订单的显示代码案例

以下是一个简单的酒店后台管理系统中订单显示的代码案例，使用了HTML、CSS和JavaScript：

HTML:

<div class="order-container">
  <h2>订单列表</h2>
  <table>
    <thead>
      <tr>
        <th>订单号</th>
        <th>客人姓名</th>
        <th>入住日期</th>
        <th>离店日期</th>
        <th>房间类型</th>
        <th>价格</th>
        <th>状态</th>
      </tr>
    </thead>
    <tbody id="order-list">
      <!-- 订单数据将会动态添加到这里 -->
    </tbody>
  </table>
</div>

CSS:

.order-container {
  margin: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 10px;
  text-align: center;
  border: 1px solid #ddd;
}

thead {
  background-color: #f2f2f2;
}

tbody tr:hover {
  background-color: #f5f5f5;
}

JavaScript:

// 假设订单数据已经从后台API获取到了，存储在一个数组中
const orders = [
  {
    id: '001',
    name: '张三',
    checkInDate: '2022-01-01',
    checkOutDate: '2022-01-03',
    roomType: '豪华大床房',
    price: 1200,
    status: '已付款'
  },
  {
    id: '002',
    name: '李四',
    checkInDate: '2022-01-05',
    checkOutDate: '2022-01-07',
    roomType: '豪华双床房',
    price: 1500,
    status: '已取消'
  }
];

// 根据订单数据动态添加到表格中
const orderList = document.getElementById('order-list');
orders.forEach(order => {
  const tr = document.createElement('tr');
  tr.innerHTML = `
    <td>${order.id}</td>
    <td>${order.name}</td>
    <td>${order.checkInDate}</td>
    <td>${order.checkOutDate}</td>
    <td>${order.roomType}</td>
    <td>${order.price}</td>
    <td>${order.status}</td>
  `;
  orderList.appendChild(tr);
});

这段代码会显示一个包含订单列表的表格，其中包括订单号、客人姓名、入住日期、离店日期、房间类型、价格和状态等信息。订单数据是从后台API获取到的，然后使用JavaScript动态添加到表格中。CSS样式用来美化表格的样式。