用web前端编写一段网吧管理系统的机器管理代码

以下是一个简单的网吧管理系统的机器管理代码，用HTML、CSS和JavaScript编写：

HTML代码：

<div class="machines">
  <h2>机器管理</h2>
  <table>
    <thead>
      <tr>
        <th>编号</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td class="occupied">占用中</td>
        <td><button class="btn btn-danger">释放</button></td>
      </tr>
      <tr>
        <td>2</td>
        <td class="available">空闲</td>
        <td><button class="btn btn-success">占用</button></td>
      </tr>
      <tr>
        <td>3</td>
        <td class="occupied">占用中</td>
        <td><button class="btn btn-danger">释放</button></td>
      </tr>
    </tbody>
  </table>
</div>

CSS代码：

.machines {
  margin-top: 20px;
}

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

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f2f2f2;
}

.occupied {
  color: red;
}

.available {
  color: green;
}

JavaScript代码：

// 获取所有按钮
const buttons = document.querySelectorAll('button');

// 为每个按钮添加点击事件监听器
buttons.forEach(button => {
  button.addEventListener('click', () => {
    const row = button.parentNode.parentNode;
    const status = row.querySelector('td:nth-child(2)');
    
    if (button.classList.contains('btn-success')) {
      // 如果是占用按钮，将状态改为占用中
      status.textContent = '占用中';
      status.classList.remove('available');
      status.classList.add('occupied');
      button.classList.remove('btn-success');
      button.classList.add('btn-danger');
      button.textContent = '释放';
    } else {
      // 如果是释放按钮，将状态改为空闲
      status.textContent = '空闲';
      status.classList.remove('occupied');
      status.classList.add('available');
      button.classList.remove('btn-danger');
      button.classList.add('btn-success');
      button.textContent = '占用';
    }
  });
});

这段代码会渲染一个包含机器信息的表格，每个机器都有一个“占用”按钮和一个“释放”按钮。当用户点击“占用”按钮时，该机器的状态将更改为“占用中”，按钮将更改为“释放”，并且按钮的样式将更改为红色。当用户点击“释放”按钮时，该机器的状态将更改为空闲，“释放”按钮将更改为“占用”，并且按钮的样式将更改为绿色。